Set Form max-height

Hello @markovetski,

I trust you’re doing well!

If you wish to give a scrolling ability to the form, please use this CSS

#forminator-ID {
    max-height: 600px;
    overflow: scroll;
}

Please replace the #forminator-ID with an actual ID from your site. Add the CSS code to Appearance > Customize > Additional CSS.

Let us know if you have any questions.

Kind regards,
Nastia

Hi,
Thank you for your kind help.

I have tried to use the following codes but with no success:
#forminator-4658{
max-height: 600px;
overflow: scroll;
}

and also:

#4658{
max-height: 600px;
overflow: scroll;
}

and also:

4658{
max-height: 600px;
overflow: scroll;
}

My page ID is 4658. Can you please send me the code I need to use?

The front page is:
https://www.worldpronet.com/become-a-team-member-registration-page2/

Thanks a lot ??
Eli.

Hi @markovetski

Thank you for response!

The CSS that will work for you is:

#forminator-module-10749 {
  max-height: 600px;
    overflow: scroll;
}

As you can see, the “forminator-id” is “#forminator-module-10749” in this case. How to find that?

Simplest way would be to use browser’s “Inspect element” tool (if you’re on PC, that’d be “right-click” and then “Inspect element”) on a first field of the form. This will show you some HTML code so look up to find the nearest line above that looks like this

<form id="forminator-module-XXXX"....

where XXXX will be a number – different for each form (note: each form, not each instance of the form on site). That CSS ID is the one you’d want to use in your CSS, just like in the CSS that I shared above (it is for your site already so should work out of the box).

Best regards,
Adam

Hi thanks again but it still not working.
The code seems to have no effect.

Hello @markovetski

I just checked your site and can’t see that the latest CSS rule that Adam shared is used. Can you please let us know where/how you added that CSS code? A screenshot would also be useful. ??

Warm regards,
Dimitris

https://snipboard.io/a4tnmD.jpg

Hello @markovetski

I apologize for late reply!

I checked the page in question again and I also can’t see that CSS being applied. I did notice, though, that there’s caching on site and, what seems to be, some additional CSS optimization – so that might be the reason.

Could you please try adding the CSS that I shared via theme customizer (“Appearance -> Customize -> Additional CDD”) or via some “custom CSS” option in your theme options panel (if there is such option) and after that clearing all the caches on site, in any CSS optimization plugins that you may have installed and then, finally, in browser?

Give it a try, please, and let us know here if that worked.

Best regards,
Adam

Hi Adam,

Added to my theme and it works like a charm.

Thanks a lot ??

Solved