Question

我正在尝试实现Vaadin responsive: Flexible wrapping中所述的类似方法。

我有一个以垂直布局为主视图的视图。 mainLayout具有一个CssLayout作为组件。此CssLayout具有两个组件：用于navi按钮的垂直布局和面板。导航按钮的水平布局的大小不确定，面板的宽度为100％。

public class ViewName extends Panel implements View 

public ViewName() {
    setSizeFull();
    VerticalLayout mainLayout = new VerticalLayout();
    setContent(mainLayout);
    CssLayout dataLayout = new CssLayout();
    dataLayout.setWidth("100%");
    dataLayout.addStyleName("flexwrap");
    mainLayout.addComponent(dataLayout);
    dataLayout.setResponsive(true);

    VerticalLayout naviButtonLayout = new VerticalLayout();
    naviButtonLayout.setSizeUndefined();
    naviButtonLayout.addStyleName("navi");  
    dataLayout.addComponent(naviButtonLayout);
    //several buttons added to naviButtonLayout
    Panel dataPanel = new Panel();  
    dataLayout.addComponent(dataPanel);
    dataPanel.addStyleName("upanel");
    dataPanel.setWidth("100%");
}

SCSS代码如下：

.flexwrap {

}

.flexwrap[width-range~="0-1000px"] {
    .navi {width: 100%}
    .upanel {width: 100%}
}

.flexwrap[width-range~="1001px-"] {
    .navi {width:25%}
    .upanel {width: 75%}
}

如果屏幕足够大，我想要导航按钮旁边的面板。但是即使对于大屏幕，面板也始终位于导航按钮下方。如果我将面板的尺寸设置为undefined：

dataPanel.setSizeUndefined();

面板在导航按钮旁边。但是它有一个我不需要的滚动条。 Vaadin指南说：“使用自适应扩展，您可以具有更灵活的环绕方式，使组件图块具有最大宽度。”

我希望dataPanel具有100％的宽度。我该如何实现？我的代码有什么问题？

如果这不可能，那么我可以用什么代替“ Vaadin响应”来包装两个大小不同的组件？看来CSS flex-box适用于相同大小的组件。

Vaadin 8：使用具有响应能力的柔性包装时出现问题

0 个答案: