Calendar display size

Hello @es2021

In the form’s preview, only the styles defined by the plugin affect the form. But in the public website, the styles defined by the theme active or other plugins modify the appearance of every tag on the page.

It is the case of the calendar. This component is affected by the style block included below. It is defined into the “https://esampo.com/wp-content/plugins/ovulation-calculator_edited/css/ovulation-calculator.css” file of the Ovulation Calculator plugin:

.ui-datepicker {
    width: 100% !important;
}

To fix it, enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

#ui-datepicker-div{max-width:300px !important;}

Best regards.