Hello @dumel

Hope you’re doing well today! I am sorry to hear about the issue you’re facing with Forminator.

I was able to replicate the issue on the test page you shared where the datepicker layout looks to be breaking. However, I was not able to replicate the issue on my lab site. I also could not see any console errors that could be causing it.

It seems that the issue is isolated to your site/form. Would it be possible to make the below tests so that we can narrow it down further?

Please create a test page using the Default WordPress Editor (not via Elementor) and add the form to the page and check if it works fine.

Please let us know how it goes. In case that doesn’t help, could you please share the form export with us so that we can take a closer look at the form.

Regarding,

It also seems that if you make field ABC “required”, and if ABC is conditional on field XYZ first being selected, form submission will fail if field ABC is not filled in, even if ABC is hidden at the time because XYZ was never selected.

I created a test form in my lab environment and created XYZ as a Select Dropdown – Wherein Option 1 would show the ABC field (which is set as required) and Selecting Option 2 would hide the ABC field.

I was able to successfully make a submission after I selected “Option 2” which would hide the “ABC” Field.

Can you please confirm if you are noticing the issue on the same form too?

For both the issues, could you please share the Form exports (saperately) with us so that we can troubleshoot it further?

To share the form export
– Navigate to the “Forminator -> Forms” page in your site’s back-end
– click on a little “gear” icon next to the form in question
– select “Export” option
– copy given export code and paste it at https://pastebin.com
– include link to that paste in your response below.

Note: this export will not include any data that is already submitted – they’ll stay safely on your site and we don’t need them anyway.

Kind Regards,
Saurabh

Hi @dumel

Thank you for the update

Could you add this CSS to your WordPress using WordPress > Appearance > Customize> Additional CSS ?

.ui-datepicker.forminator-calendar--material{
    max-width: unset !important;
}

The problem is coming from https://wordpress.org/plugins/wp-travel-engine/, The issue is the plugin is also using the ui-datepicker but set a max width, the ideal scenario would be adding that max width into a custom class instead of the generic ui-* class.

https://monosnap.com/file/IiolEbp1jelDlUNKtCEPvK0y3FschT

But the shared CSS should bypass the problem on Forminator form when using the material design.

Let us know the result you got.
Best Regards
Patrick Freitas

Hi @dumel

I tested your page and it seems that CSS helps in general to make the correct width of the calendar. Do you mean that the calendar does not look good still when it comes to rows and cell colors? Apart from that functionality seems to work well.

Kind Regards,
Kris

Hello @dumel

I can see the issue still happening and it is due to a conflict between forminator CSS code and Elementor styles,

You can add a custom CSS to override the date picker colors. Please use these classes to change the color for date picker numbers (add color and background color).

.ui-datepicker-calendar tbody td a.ui-state-default{}

Kind Regards
Amin