Auto equalize 2 adjacent field group heights

  • Resolved Grand Vizier

    (@grandvizier)


    1 year, 9 months ago

    Hello,

    Is there a way to auto equalize column heights of 2 Field Groups placed side by side as in the attched link below?

    I would like the 2 field group to always have the same height such that even if a file is uploaded on upload file on one side, thus causes its height to increase I would like the other one to always adjust in height so as to always ensure the two filed groups are of the same height.

    Please help me with a custom CSS that can achieve this. Thank you.

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @grandvizier,

    Based on the screenshot what you are noticing is the expected behaviour, as the fields are displayed based on responsive view the height will vary depending on the fields added.

    What could be done is to add a min-height CSS property to the section and see whether it would help with having the same height.

    However, in order to suggest a working Custom CSS, we’ll also need access to the page where you have the form.

    Possible to also share a URL to the page where you have the form, so that we could give a closer look?

    Looking forward to your response.

    Best Regards,

    Nithin

    Thread Starter Grand Vizier

    (@grandvizier)

    Hello Nithin,

    Thank you for the fast reply. Here you go;

    https://app.essaynice.com/987704840-2/

    Please consider a scenario where one might upload 3 files, but the height would still be the same as the other field group when coming up with the CSS.?Regarding uploading files, I also would like to know how to reduce the size of the uploaded files’ icons.

    Thank you.

    Thread Starter Grand Vizier

    (@grandvizier)

    These icons are the ones I am reffereing to.

    https://drive.google.com/file/d/1VbsRb1MM9hXUK-6hJGzb4-43pYP7pnNk/view?usp=share_link

    Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    Hi @grandvizier

    Hope you are doing fine!

    To have the same height for both group fields section you can adjust the min height and the icon size can be modified changing the font size and the container dimensions. Please try using the following CSS code in the site:

    // Height for group fields

#group-1 .forminator-all-group-copies,
#group-2 .forminator-all-group-copies{
    min-height: 430px!important;
}

//Icon size

.forminator-uploaded-file--preview {
    height: 20px!important;
    width: 20px!important;
}

.forminator-uploaded-file--preview [class*=forminator-icon-]:before {
    font-size: 12px!important;
}

    I’d suggest using the !important rule to override the existing styles in the form.

    Please add the code in the Appearance > Customize > Additional CSS section and let us know if you get the expected results.

    Kind regards

    Luis

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    Hello @grandvizier ,
    ?
    We haven’t heard from you for several days now, so it looks like you no longer need our assistance.
    ?
    Feel free to re-open this ticket if needed.
    ?
    Kind regards
    Kasia

    Thread Starter Grand Vizier

    (@grandvizier)

    Hello,

    Thank you very much for you assistance. The code worked well to my satisfaction.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Auto equalize 2 adjacent field group heights’ is closed to new replies.