Unwanted scrolling on multipage form

Question

I have integrated a Cognito form into a section of a new page I'm creating. It works like a charm except there is something that makes the form scroll down so the first active text (or other) field roughly aligns with the bottom border of the menu. You have to scroll up in order to read the label above the fields respectively. This happens every time you hit the "back" or "forward" button to go to another page of the form.

The pages of the form all have a different height, but I'd still expect the form not to scroll but to expand towards the bottom of the page.

The CMS is WP and the theme is the Stockholm theme. (The site is currently under construction and not accessible to anyone except me.)

Any hints on how to tackle this issue?

Answer 1

I’m a developer with Cognito Forms. The form is scrolling the new page into view during page navigation. The problem is that the top of the page is position under the menu that is fixed position. Currently, our scroll into view logic does not provide a way to handle fixed position headers/menus. However, one possible workaround is to increase the top margin of the form to the height of the fixed position header. This will prevent the content of the form from being hidden under the header. The following CSS should do the trick:

.c-forms-form-body > .c-section { margin-top:<height of the fixed position header>px!important; }

Answer 2

It's a bit old question but I think this is still an issue in the end of 2017. For the actual circumstances I managed a potential workaround: use iframe embed and extend the embed code with the following CSS style:

Add padding-top value to push down the .forms-form-body element (with the height of you header) and pull up the whole iframe with the same header height

<iframe src="URL" style="position:relative;width:1px;min-width:100%;*width:100%;top: -<HEADER_HEIGHT>px;" frameborder="0" scrolling="yes" seamless="seamless" height="728" width="100%"></iframe>
<script src="https://services.cognitoforms.com/scripts/embed.js"></script>
<script>
      Cognito.setCss('.c-forms-form-body { padding-top: <HEADER_HEIGHT>px!important; }');
</script>

Answer 3

this worked pretty well for me:

.c-forms-form-body { padding-top:100px!important; }