java - 生成的 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 太大，导致面板底部出现水平滚动。这是它在 Firebug 中的样子:

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

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

但是，这仅适用于一个窗口，即内容以 1000 像素宽度显示的窗口。更 slim 的 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 是个好主意.