生成的 Div 造成严重破坏

Question

我会尽力描述这个问题。

我正在 Vaadin（类似 GWT 的框架）中开发一个 Web 应用程序，我在其中使用模式窗口来显示表格和其他信息。

模态窗口大小不一，但出于显而易见的原因，我想对它们都使用相同的 CSS 类。因此，我在 CSS 之外指定特定于大小的参数，而不是在创建模式窗口时在 java 代码中指定。例如：

public class InventoryAssignSubscription extends Window {

   Panel mainPanel = Cf.panel(I18N.get("inventory.assignsubscription.single.header"));

   public void init(Object customer)    {

        setResizable(false);

        setModal(true);
        setWidth("730px");
        center();

        mainPanel.addStyleName("m2m-modalwindow-mainpanel");

但是，我发现了一个问题。

当我创建一个包含窗口中所有内容的面板组件时，它的宽度将填充窗口的内容宽度，但是当我查看通过 Firebug 生成的标记时，我看到生成了另一个组件，面板内的 VerticalLayout 具有另一个宽度比面板。我不知道它是如何到达那里的。我得到的问题是 VerticalLayout 太大并导致面板底部出现水平滚动。这是它在 Firebug 中的样子：

我发现解决此问题的唯一方法是使用 m2m-modalwindow-mainpanel CSS 类名设置面板内所有 VerticalLayout 的最大宽度：

.v-panel-content-m2m-modalwindow-mainpanel .v-verticallayout {
    max-width: 1000px;
}

但是，这仅适用于 ONE 窗口，即内容以 1000 像素宽度显示的窗口。更苗条的 Windows 永远不会让它们的 VerticalLayout 受到这个 CSS 类的影响，因为它们的宽度应该低于 1000px.... =(

有没有人知道我可以如何解决这个问题..？也许不知何故，当我创建面板时，我可以以某种方式告诉它它“生成”的组件（div）应该具有哪些最大宽度......？

如果我的问题描述得太生动，或者如果您需要更多信息来帮助我解决，请不要犹豫！

谢谢！

编辑：我添加了用于面板填充的 CSS 和来自 Firebug 的显示问题的图像。面板底部有一个滚动条，遗憾的是没有显示在图像中..

CSS

.v-panel-content-m2m-modalwindow-mainpanel {
    padding: 15px;
}

图片：

Answer 1

默认情况下，Vaadin 中的每个面板都有一个垂直布局。您将面板的宽度设置为 730 并且布局只有 704 像素宽这一事实表明您的面板中有一个边距。尝试使用 Firebug 中的布局选项卡来查看造成差异的原因。

Vaadin 开发人员付出了很多努力来正确调整大小，不应该有任何不解释的地方。

最好将您的问题发布到Vaadin's forum。