html - Wordpress - 如何阻止 WPBakery 构建的页面上的 Pardot 表单在某些浏览器尺寸上添加滚动条?

标签 html css wordpress wpbakery pardot

所以我使用 WPBakery 页面构建器构建了这个 Wordpress 页面,并向其中添加了一个 Pardot 表单。在某些浏览器尺寸上,表单(看起来像是一个 iframe 元素)比它所在的容器大,因此它添加了滚动条来补偿。是否有推荐的解决方案来防止这种情况发生?见附图:

Picture of Pardot form forcing scrollbars

最佳答案

如果您不能完全确定表单是否为 iframe 元素,您可以尝试使用 CSS 并使用动态宽度和高度值(例如 width: 100%; 代替表单字段)类似于 width: 250px;,它会自动调整元素的大小以适应可用宽度。这将处理水平滚动条。

对于垂直滚动条,您可以尝试使用伪属性定位滚动条来操纵它的样式或完全隐藏它。您可以在这里阅读更多相关信息:

https://css-tricks.com/almanac/properties/s/scrollbar/

但值得注意的是,不强烈推荐这种方法,因为它对不同浏览器和平台的支持有限。

但是,对于这个特定的垂直滚动条,它似乎是表单容器上的高度或填充问题,因此您可以使用 @media 查询来定位它,以使其在整个过程中更具响应性设备。

希望对您有所帮助!

关于html - Wordpress - 如何阻止 WPBakery 构建的页面上的 Pardot 表单在某些浏览器尺寸上添加滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59773037/

相关文章:

wordpress - 如何删除生成假 Google 结果的网站黑客?

javascript - 为什么当我按“开始”时不显示 console.log 消息?

Jquery Navigation Toggle 在页面下方太远

css 1px 边框在带有 chrome 和 safari 的非高密度显示器(视网膜)上显得更厚

html - 如何防止CSS网格列超过网格容器的最大高度?

wordpress - Woocommerce 显示默认变化价格

html - 如何仅使用 CSS 使 HTML 列表不带元素符号?

javascript - JQueries Live 在 IE8 中工作吗?

css - 试图覆盖 Drupal 6 中的媒体 ="print"样式表

javascript - 小部件和菜单中的两个 jQuery 事件发生冲突