Page content hidden on second step of multi-page form [RESOLVED]

I have a form that has two pages - the form, followed by a step asking the user to confirm their input/submit the form.

On the second step, when “display: none;” is applied to the table containing the first, for some reason this causes the top part of my non-form page content to disappear out the top of the browser?! In my browser’s inspector if I find that rule (display: none) and disable it, the missing page content reappears.

Anyone know what’s happening, and how I might fix it?

You may have invalid HTML or an unclosed HTML tag in your form, which can cause styles to be applied to undesired elements. Check any HTML elements on your form or website. This tool can help: https://validator.w3.org/

Thanks for getting back to me, apologies for the slow response.

I don’t have anything, as far as I can see, that’s breaking the layout - I can’t find an HTML checker that tells me I have anything more serious than things like stray “itemprop” attributes, or width attributes on table cells.

When I load a page with a form on it displays fine. If I submit the first step something seems to break. And if I even add the form ID to the URL (eg. “#gf_125”) it breaks - I noticed this fragment gets added on submission and found if I include it in the URL pre-submission it has the same effect.

Ha, and then I found it and (of course) it was some (of my) dodgy CSS.

Thanks for your help.

2 Likes