生成的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");

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

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

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

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

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

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

如果我的问题描述得过于生动，或者您需要更多信息来帮我解决，请随时提出！

谢谢！

编辑：我为Panel填充添加了CSS，Firebug中的图像显示了问题。不幸的是，面板底部有一个滚动条没有显示在图像中..

CSS

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

图像：

Answer 1

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

Vaadin开发人员付出了很多努力来确保正确的尺寸，并且在没有任何解释的情况下不应该有任何东西。

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

是个好主意