vertical step: max height = none, scroll question

[splnty]

hey zecat, we have a long vertical form with quite a few questions and steps (mobile 350px). To avoid a scroll pane within the step we have applied --paper-vertical-step-max-height: none; to the paper-step. This leaves the paper step in the wrong position when continue is clicked. Any ideas of how to focus the user on the correct step after clicking continue?

[Zecat]

Oh I see, when you say "in the wrong position", you mean the height of the vertical stepper change and the step seems to move. To focus the user on the correct step, the solution is to scroll, so the selected step remains at the top of the viewport.

I have a quick workaround on https://jsfiddle.net/Zecat/rpwng4wL/
It makes the page scroll to ( offsetTop of the stepper ) + ( step Index * 56 ) whenever selected change (in vertical layout, a closed step has a height of 56px).

Further

• take care that the stepper is vertical
• maybe you only want to scroll when a step is deselected (not at initialisation)
• manage the case where the stepper is closed (selected == null)
• if you use a custom scroll target, select your scroll-target and use the method scroll(left, top)
• maybe you want a smooth scroll, there is a tool for that in app-layout/helpers that should be included in IronScrollTarget in the future Extract scroll method to behavior PolymerElements/app-layout#228