Calendar fields too wide

  • Resolved mediafishcanarias

    (@mediafishcanarias)


    2 years, 7 months ago

    Hi,

    Testing your plugin – when you go on the site and click the yellow button to your right the forms opens in a modal but the calendar fields overlap the form. The same happens when I have them next to eachother… as you can see just below

    Any idea how to avoid that?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello @mediafishcanarias !

    Hope you’re doing well today!

    It looks like the styling for the popup is overriding some of the things set by the form’s style.

    Please try the following CSS:

    #forminator-module-415 .forminator-ui.forminator-custom-form[data-design=flat] .forminator-input {
width: calc(100% - 20px) !important;
}

#forminator-module-415 .forminator-ui.forminator-custom-form[data-design=flat] .forminator-input-with-icon .forminator-input {
padding-left: 10px !important;
}

#forminator-module-415 .forminator-ui.forminator-custom-form[data-design=flat] .forminator-textarea {
width: calc(100% - 20px) !important;
}

    You can add this code to Appearance >> Customise >> Additional CSS or any other similar place.

    I’ve added #forminator-module-415 to each selector to limit the application of the CSS only to that form.

    Warm regards,
    Pawel

    Thread Starter mediafishcanarias

    (@mediafishcanarias)

    Hi,

    Thanks yes that will do – well something in the selectors wasn’t right but if I only take the first and last selector such as #forminator-module-415 .forminator-textarea then it works

    Thanks & have a great day!

    Thread Starter mediafishcanarias

    (@mediafishcanarias)

    Hi Pavel,

    I just realized that we have the following problem when using your css:

    The date starts underneath the icon

    Please check here – just click the yellow button and add the date Date of arrival or Date of departure: Booking Request

    and you will see that it is displayed below the calendar icon.

    In the Forminator Form preview all forms show perfectly fine with the text next to the icon.

    Let me know.

    Thanks

    Thread Starter mediafishcanarias

    (@mediafishcanarias)

    Hi Pavel

    I replaced: 

    #forminator-module-415 .forminator-ui.forminator-custom-form[data-design=flat] .forminator-input-with-icon .forminator-input {
padding-left: 10px !important;
}

    With 

    #forminator-module-415 .forminator-ui.forminator-custom-form[data-design=flat] .forminator-input-with-icon .forminator-input {
width: 80% !important;
}

    It works like that but not sure if there could be a better solution…

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @mediafishcanarias

    I see the 80% looks fine, you can also try this

    width: calc( 100% - 46px ) !important;

    replace it instead of the 80%, it seems will fit better on a smaller screen too.

    Best Regards
    Patrick Frietas

    Thread Starter mediafishcanarias

    (@mediafishcanarias)

    Hi Pavel,

    Perfect – yes that’s better.

    Thanks for your great support.

    Sven

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Calendar fields too wide’ is closed to new replies.