Navigation
Archive / Visibility issue – Space below Wufoo forms when resizing screen.
This is archived content. Visit our new forum.
  • Author
    Posts
  • April 23, 2014 at 10:06 am #36298

    David J
    Participant

    Hello.

    I LOVE X.

    After the desktop screen is resized a very large gap remains after the visibility is changed.

    I have two different sushi menus and use one for mobile and tablet and a separate one for the desktop visibility. They each load fine on desktop and mobile sizes, but switching between the two without refreshing causes the large gap under the form.

    (I know different forms being visible, because if a user half enters a form and resizes the screen their info is lost – but I can’t see a way around it)

    http://sushirolls.co.uk.gridhosted.co.uk/delivery/

    Thanks in advance!

    David

    April 23, 2014 at 9:23 pm #36558

    Support
    Member

    Hi there!

    Thank you for the link.

    I checked the website but I don’t see the large gap. Can you please explain it further using a screenshot? I don’t think it is everyone’s habit to resize the browser when they’re filling up a form.

    Cheers!

    April 24, 2014 at 9:55 am #36759

    David J
    Participant

    Hi there,

    The gap at the bottom appears once the screen is resized and the first form is replaced by the second and vice versa.

    I’m not sure how to upload a screen shot to this blog, sorry! If you reduce the screen size once the page loads, you will then see a large gap under the replacement menu and above the footer.

    Thanks!

    April 24, 2014 at 5:35 pm #36942

    Rad
    Moderator

    Hi David,

    You were using iframe with fixed height, and it does not respond well.

    But you could add this css at yout customizer’s custom css, or at your child theme’s style.css

    .wufoo-form-container {
max-height: 7500px!important;
}

    Hope this helps.

    April 29, 2014 at 5:48 pm #38676

    David J
    Participant

    Thanks for your help. This doesn’t seem to have resolved the gap at the bottom when resizing the screen but as you said, not many people will probably do this. It has however resolved the bottom of the form being cut off.

    April 30, 2014 at 3:56 pm #39028

    Alexander
    Keymaster

    Hi David,

    This is hard to control because the WuFoo form is telling the browser it needs much more space than it truly does. The CSS allows you to cap that at a certain point, but the gap can come back depending on screensize.

    I see you’re using visibility shortcodes and embedding the form twice (desktop and mobile)

    How are you embedding using their WordPress plugin? (http://wordpress.org/plugins/wufoo-shortcode/)

    Maybe try setting the autosize parameter to true like their example. This allow you to only embed it once.

  • Author
    Posts