java - VerticalLayout中的多个CssLayouts

我在屏幕上附加了两个视图，一个是普通视图，另一个是调整浏览器窗口大小（或发生包装时）的视图。我正在使用Vaadin，在VerticalLayout中有多个CssLayouts。





我实际上正在做的是，我有一个UI类扩展了CssLayout，它提供了一些常规功能，这些功能在下拉菜单中也包含一些项。当选择了任何一个项目时，将添加一个标签，显示该项目已被选中，带有一个十字按钮可以删除该标签，这表示选择被取消。到达宽度的末端时，将包裹这些物品。

我需要多次上述功能，因此我将这些CssLayouts放置在Panel内的Vertical布局中，因此，当垂直布局的高度超过面板的高度时，会出现滚动条，这很好。

现在的问题是包装，如视图中所示。由于存在多个CssLayouts，所以需要的是，当任何css布局包装时，下面的布局向下移动以使它们不会重叠，因为它们现在正在做。

我在其中添加这些CSS布局的代码

public class ProcessUserSelectionPanel extends Panel
{

private List<SelectorUI> processUserSelectors = new ArrayList<SelectorUI>();
private static int SELECTION_LAYOUT_HEIGHT = 38;
private static int MAX_PANEL_HEIGHT = 200;
private VerticalLayout innerLayout ;



protected void initUI()
{
    addStyleName("u-proc-user-panel");
    setHeight(MAX_PANEL_HEIGHT,Component.UNITS_PIXELS);
    innerLayout = new VerticalLayout();
    innerLayout.addStyleName("u-proc-user-panel");
    innerLayout.setWidth(100, Component.UNITS_PERCENTAGE);
    innerLayout.setMargin(true);
    setContent(innerLayout);

}

public void updateSelectorPanels(){
    innerLayout.removeAllComponents();
    processUserSelectors.clear();
    int  task = 0;
    for(int i = 0 ; i < 5 ; i++){

            SelectorUI processUserSelector = new SelectorUI();

            processUserSelectors.add(processUserSelector);
            innerLayout.addComponent(processUserSelector);
            task++;
        }
    }
    innerLayout.setHeight((task+1)*SELECTION_LAYOUT_HEIGHT,Component.UNITS_PIXELS );
    if((task+1)*SELECTION_LAYOUT_HEIGHT < MAX_PANEL_HEIGHT){
        setHeight((task+1)*SELECTION_LAYOUT_HEIGHT+5, Component.UNITS_PIXELS);
    }
    else{
        setHeight(MAX_PANEL_HEIGHT,Component.UNITS_PIXELS);
    }
}

我在Css布局中用于标签（具有文本和十字图标）的CSS类

.u-selector-panel-big-label {
        margin-right：5px;
        底边距：5px;
        显示：行内块；
        边框：实心；
        border-width：thin;
        border-color：rgb（216，216，216）;
        背景颜色：＃EBE2FF; / *＃D0C4F0; * /
        指针事件：无；
    }

.u-selector-panel-heading{
    margin-right:20px;
    text-align: center;
    white-space:nowrap;
    display:inline-block;
/*  pointer-events: none; */
    width:150px;
}

.u-selector-panel-text-label{
    margin-right:15px;
    text-align: center;
    white-space:nowrap;
    display:inline-block;
    background-color: #EBE2FF;/*#D0C4F0; */
    pointer-events: none;
}

.u-selector-panel-icon-label{
    text-align: center;
    white-space:nowrap;
    display:inline-block;
    background-color: #EBE2FF;
    pointer-events: all;
}

.v-csslayout-container .v-filterselect  {
    margin-top: 2px;
    display:inline-flex;
    height: 1.49em;
}

可能是我遗漏了某些东西或未正确使用它们。感谢您为解决此问题提供的帮助。
干杯

最佳答案

尝试以百分比而不是像素的形式给出宽度。