多页窗体上不必要的滚动

Question

我已经将一个认知形式集成到我正在创建的新页面的一个部分中。它的工作方式就像一种魅力，只是有些东西使表单向下滚动，因此第一个活动文本(或其他)字段大致与菜单的底部边框对齐。您必须向上滚动，以便分别读取字段上方的标签。每次单击“后退”或“向前”按钮转到表单的另一页时，都会发生这种情况。

表单的页面都有不同的高度，但我仍然希望表单不会滚动，而是扩展到页面的底部。

CMS是WP，主题是斯德哥尔摩主题。(该网站目前正在建设中，除我外，任何人都无法进入。)

对于如何解决这个问题，有什么建议吗？

Answer 1

我是科尼图表单的开发人员。窗体将在页面导航期间将新页滚动到视图中。问题是，页面的顶部是菜单下固定位置下的位置。目前，我们的滚动视图逻辑没有提供处理固定位置标头/菜单的方法。然而，一种可能的解决方法是将表单的顶部边距提高到固定位置标头的高度。这将防止表单的内容隐藏在标题下。下面的CSS应该能做到这一点：

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

Answer 2

这是一个有点老问题，但我认为，这仍然是一个问题，在2017年年底。根据实际情况，我管理了一个潜在的解决方案:使用iframe embed并使用以下CSS样式扩展嵌入代码：

添加填充-顶部值，以向下推下.form body元素(具有标头的高度)，并以相同的标头高度拉出整个iframe。

<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

这对我来说效果很好：

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