Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 22, 2023 at 5:54 pm #1402032
    philthebass

    Hi,

    Enfold seems to be forcing all our Gravity Forms fields to full width and ignores the field size set in the form editor (small, medium, large).

    If I preview the forms outside of Enfold the width are good, but not inside Enfold.

    It looks like Enfold is overwriting the width: e.g.
    GF Preview
    https://www.dropbox.com/s/kpjw6szkzimpvor/GF%20Preview.jpg?dl=0
    but the style is being overridden by enfold.

    Enfold
    https://www.dropbox.com/s/1qgs4uhqdl0pze6/Enfold%20View.jpg?dl=0

    How can we stop this from happening?

    Thanks

    • This topic was modified 1 year, 9 months ago by philthebass.
    March 22, 2023 at 6:19 pm #1402036
    philthebass

    Just a follow up, I’ve hacked my way around this by adding the following to the theme’s Quick CSS, but it’s hacky

    /* Hack to fix field widths in GF and Enfold */
    .gform_wrapper.gravity-theme .gfield input.small, .gform_wrapper.gravity-theme .gfield select.small {
    width: calc(25% – 16px * 3 / 4)!important;
    }
    I’m having to use a few !importants; to work around styling particulaly Gravity Forms.

    Does anyone have a more elegant solution?

    Thanks

    March 23, 2023 at 7:07 am #1402095
    Nikko

    Hi philthebass,

    Can you give us a link to the page? (since I don’t have access to gravityforms) so we can inspect the form and try to provide some CSS code that might help.
    You can post the link privately.

    Best regards,
    Nikko

    March 23, 2023 at 9:27 am #1402118
    philthebass

    Hi Nikko,

    Sure. Have posted privately as requested.

    This has the hacky !important fix in the Quick CSS

    /* Hack to fix field widths in GF and Enfold */
    .gform_wrapper.gravity-theme .gfield input.small, .gform_wrapper.gravity-theme .gfield select.small {
    width: calc(25% – 16px * 3 / 4)!important;
    }

    I can disable that if you need me to.

    Thanks

    Phil

    March 24, 2023 at 5:29 am #1402234
    Nikko

    Hi philthebass,

    Thanks for providing the link however, I could not see the form and this is what I see on the page:
    Oops! You need to be logged in to use this form.

    Best regards,
    Nikko

    March 24, 2023 at 10:33 am #1402269
    philthebass

    Sorry Nikko,

    It had GF Registration Addon enabled. That’s off now so you can see the form.

    Regards

    Phil

    March 24, 2023 at 12:19 pm #1402286
    Nikko

    Hi Phil,

    Thanks, please use this CSS code:

    #top .gfield input.small, 
#top .gfield select.small {
    width: calc(25% - 16px * 3 / 4);
}

#top .gfield input.medium, 
#top .gfield select.medium {
    width: calc(50% - 16px / 2);
}

    Hope it helps.

    Best regards,
    Nikko

    March 24, 2023 at 12:28 pm #1402291
    philthebass

    Thanks Nikko,

    That’s fixed it :-)

    Regards

    Phil

    March 24, 2023 at 2:28 pm #1402308
    Nikko

    Hi Phil,

    You’re welcome :)
    Thanks for using Enfold and have a great weekend!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Prevent Enfold From Forcing Gravity Forms Fields To Full Width’ is closed to new replies.