css - ExtJS:删除 Firefox 中不必要的表单项滚动条

Question

我正在寻求一些关于某些表单项上出现不必要的滚动条的建议。该问题的屏幕截图如下所示。请注意，最右边的滚动条是不必要的。

bad_scrollbars http://img21.imageshack.us/img21/9307/scrollfu.png

罪魁祸首似乎是以下 css，添加 overflow: auto; 以在基于 gecko 的浏览器中的窗口中形成元素(问题出现在 Firefox 上):

.ext-gecko .x-window-body .x-form-item {
    outline: medium none;
    overflow: auto;
}

删除此样式可以解决问题，但我对可能产生的副作用保持警惕 - 虽然我还没有注意到任何副作用，但显然包含此样式是有原因的。

有没有比较了解Ext样式的人知道覆盖这个css去掉overflow: auto;样式会不会引起其他问题？

顺便说一句，这只是某个组件的问题(到目前为止) - Ext.ux.form.MultiSelect 组件的自定义扩展 - 即使其他组件使用更多的垂直空间。有谁知道这可能的原因吗？

感谢您的帮助。

Answer 1

溢出:如果元素的内容大于元素客户区减去任何填充，则自动告诉浏览器向元素添加滚动条。摆脱 CSS 中的滚动条正是这样做的。无论如何，它都会使滚动条消失。

您的解决方法的副作用是如果客户端外部有内容，用户将无法看到它。此外，这不仅会发生在这个表单上，而且会发生在您的应用程序中的每个表单上，除非您在自定义类中应用您的解决方法。

正确的解决方法是弄清楚为什么您的内容区域比表单的客户区域大。 Firebug 对此大有帮助，因为您可以检查 DOM 并查看容器的大小以及所有子项的大小。

我怀疑您的 clear selections 控件(这是自定义控件吗？)未正确调整自身大小(即在您的表单布局中，您告诉它的高度为 x 像素，但实际上它自身的大小为 x+1(记住边距和填充)。表单布局正在做所有的工作来决定包装区域(带有滚动条的区域)有多大，并且控件必须适合该区域。