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：显示问题的图像

enter image description here

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

enter image description here

在标记中，您会看到： -Panel包含CssLayout。 - 在CssLayout之外，我们有第一个实例，它不应该存在，也标记出来。 - 以下div是包含filterPanel的VerticalLayout。 - 接下来我们有线，正确的线，和 - 最后我们有桌子。

抽象组件“horizontalLine”用作分隔器，用于划分filterPanel组件和表。根据代码，它添加了一次，但是，由于浏览器中的一些奇怪的原因，它增加了两次。我希望它添加一个实例，另一个实例添加到cssLayout的上部顶部，高于其他所有内容！疯了吧！？ = P

我不知道为什么会这样。从代码中可以看出，它只有一个实例，并且它只添加了一次....任何人都知道发生了什么？

谢谢！ /最大

Answer 1

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

无论如何，除非你已经弄明白，否则请将CSS的相关部分添加到问题中。

HTH， /了Jonatan

Answer 2

现在我才注意到您将布局设置为新的Panel布局。在您的CSS样式“m2m-base-panel”中，您可能不会使用Panel内容布局周围的绘制边框覆盖某些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，这可以解决您的问题。

由于某种原因，Vaadin成分增加了两次

2 个答案: