[BUG] Unexpected Flatpicker content rendering

[Steve-Reid]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
    • Version:
• Formio.js version: react-formio 4.3.0
• Frontend framework: ReactJS 16.13.0, NextJS 9.2.2
• Browser: Chrome
• Browser version: 81.0.4044.138

Steps to Reproduce

1. Install and import react-formio as per the embed instructions
2. Render the form using our test form as the source.
3. View in the browser

Expected behavior

All the fields in the source form are displayed

Observed behavior

All the field in the source form are displayed with some additional unexpected HTML content seemingly belonging to flatpickr displayed at the bottom of the body tag.

[randallknutson]

You probably need to include either the formio.css file from react-formio or the flatpickr css. Those require some additional css from just bootstrap.

[Steve-Reid]

I couldn't find any information in the documentation on embedding stating that this was required? We would prefer not to have to use bootstrap styling if possible or spend time overriding it?

[Steve-Reid]

OK, I've included the formio.full.min.css and that seems to have resolved the issue described above via display: none. I can see though that the elements are required to render the flatpickr calendar properly.

Might be an idea to update the instructions for embedding the form in ReactJS?

[bayyamsandeep]

calender in not displaying in my project could you please help me

[TanyaGashtold]

I am closing the issue as it was created too long ago and there are no new comments here. I hope it was resolved. If not, please reopen it. Thanks!