Vaadin 组件由于某种原因添加了两次

Question

我正在 Vaadin 框架中开发一个 Web 应用程序。 据我所知，我的应用程序中有一个非常奇怪的行为，希望你们中的一些人熟悉或以其他方式知道如何解决。

这是相关代码：

        AbstractComponent horizontalLine = Cf.horizontalLine();
        horizontalLine.addStyleName("m2m-horizontal-line-list-separator");
        horizontalLine.setWidth("100%");
        horizontalLine.setParent(null);
        SVerticalLayout spacer = Cf.vLayout(new SLabel(""));
        spacer.setMargin(true);

        CssLayout cssLayout = new CssLayout();

        cssLayout.addStyleName("m2m-css-style");
        cssLayout.addComponent(inventoryFilterPanel);
        cssLayout.addComponent(horizontalLine);
        cssLayout.addComponent(simCardTable);

        Panel basePanel = new Panel("");
        basePanel.setContent(cssLayout);
        basePanel.addStyleName("m2m-base-panel");
        basePanel.setSizeFull();
        basePanel.getContent().setSizeUndefined();

        addStyleName("m2m-tab-main-view");
        setMargin(false);
        addComponent(basePanel);
        setExpandRatio(basePanel, 1);

编辑：添加相关 CSS：

.m2m-horizontal-line-list-separator {
    width: 97%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.m2m-css-style {
    margin: 10px;
}

.v-panel-content-m2m-base-panel .v-verticallayout  {
    min-width: 100%;
}

.m2m-tab-main-view {
/**Didn't have any CSS inside it*/
}

编辑 2：显示问题的图像

编辑 3： Firebug 生成的标记的屏幕截图

在标记中，您会看到： -包含 CssLayout 的面板。 - 在 CssLayout 中，我们有该行的第一个实例，它不应该在那里，也被标记了。 -下面的div是包含filterPanel的VerticalLayout。 - 接下来我们有一行，正确的一行，以及 -终于我们有桌子了。

抽象组件“horizo​​ntalLine”充当分隔符来分隔filterPanel 组件和表格。根据代码，它添加了一次，但是，由于浏览器中的某些奇怪原因，它添加了两次。一个实例添加到我想要的位置，另一个实例添加到 cssLayout 的上顶部，高于其他所有内容！疯狂吧！？ =P

我不知道为什么会这样。正如您从代码中看到的那样，它只有一个实例，并且仅添加一次......有人知道发生了什么吗？

谢谢！ /最大限度

Answer 1

从您提供的代码中很难说出发生了什么。我的猜测是，实际渲染水平线的 CSS 渗透到其他组件/布局中，或者您的 CSS 规则有错误。

无论如何，请将 CSS 的相关部分添加到问题中，除非您已经弄清楚了。

哈特哈，
/乔纳坦

Answer 2

现在我才注意到您将布局设置为新的面板布局。在您的 CSS 样式“m2m-base-panel”中，您可能不会使用围绕面板内容布局绘制边框来覆盖某些面板基本样式。

//This CSS part draw around Panel content layout border, 
//with I think you see "upper top of the cssLayout"        
.v-panel-content {
    border: 1px solid #BABFC0;
    //Some other style depends on with Vaadin theme you use
}

尝试添加到您的面板样式 Runo.PANEL_LIGHT 或 Reindeer.PANEL_LIGHT，这应该可以解决您的问题。