Scrolling dilemma with content of variable/dynamic height
I have a page with that displays a multi-step form in an
. The form is from a 3rd party service so I have no control over usage of the
or any of its content's styling... including width. The general layout of the page looks like this:
This is all well and good for Step 1 of the form, but in Step 2, the length of the form more than triples. I have no way of knowing the height of the content at each step and therefore can't resize the height of the
accordingly, so unless I want the
to scroll, I have to set its height to something ridiculously large (which will probably look pretty odd on Step 1)...
So I feel like my only option here is to keep the
sized at its Step 1 height and have it scroll for steps 2 and 3:
And this brings me to my real question: I personally don't like scrolling frames within an already-scrolling parent page. It usually feels clunky and awkward... especially on mobile devices. But I see it quite frequently... is this just a bad design pattern being used so much it becomes acceptable? And how does scrolling a long form in a container one third of its height affect usability?
Any insight or suggestions for improvement (given the limitations I'm facing with the 3rd party's content (and the
itself for that matter) would be greatly appreciated.
The ideal scenario would probably be to implement a solution that doesn't use an iframe, communicating with the 3rd party service using some sort of API so you can be in full control of the UI.
That said, if the solution needs to use an iframe, the issue occurs when there are two scrollbars: the page scrollbar and the iframe scrollbar.
Prevent the second scrollbar: If you could access the iframe and see what is the height of the content, then simply modifying the height of the container would prevent the overflow that shows a second scrollbar. This is the same as implementing both the solutions that you propose.
Prevent the main scrollbar: If the previous is not possible, another way would be to "cancel" the main/page scrollbar. In this case the form doesn't show directly in the page, but in a modal. A modal "overrides" the main page creating a different level of information and cancelling the main scrollbar. This solution has also the benefit of making the user focus on the form.