我正在开发一个Vaadin应用程序,并且我很难获得我想要的布局的某些方面.现在的主要问题是,无论内容的大小有多大或浏览器窗口有多小,我的布局似乎都无法获得垂直滚动.
我已经阅读了这个主题,我知道hLayout和vLayout不支持滚动条,但小组会这样做.我尝试了许多不同的组合使其工作,但我只是设法得到一个水平滚动条来生成,但从来没有垂直滚动条.
另一个问题是我正在公司提供的现有“模板”中构建应用程序.此模板包含一个包含一些版权信息的页脚.对于我正在添加的内容,此页脚似乎没有占据浏览器窗口中的任何空间,这导致在较小的屏幕上查看水平滚动条显示在页脚“下方”,不可访问…我’我将提供一些现在看起来如何的代码.
public class InventorySimCardTable extends M2MViewBase { //M2MViewBase extends VerticalLayout
private final SPanel mainContent = Cf.panel("");
private final SPanel tabPanel = Cf.panel("");
private final SVerticalLayout tabcontent = Cf.vLayout();
protected InventoryFilterPanel inventoryFilterPanel;
@Override
protected void initComponent() {
setSizeFull();
tabPanel.setSizeFull();
tabPanel.getContent().setSizeUndefined();
Table simCardTable = new Table();
simCardTable.setWidth("1898px");
simCardTable.setPageLength(15);
tableContainer.setSizeUndefined();
tableContainer.addComponent(simCardTable);
mainContent.setWidth("99%");
mainContent.setHeight("100%");
mainContent.setContent(tableContainer);
mainContent.setScrollable(true);
centeringlayout.setSizeFull();
centeringlayout.addComponent(mainContent);
centeringlayout.setComponentAlignment(mainContent,Alignment.MIDDLE_CENTER);
tabPanel.addComponent(centeringlayout);
addComponent(tabPanel);
}
}
我很想知道是否有人在我的代码中看到任何明显的错误.如果有人知道我可以在页脚CSS上设置什么属性,让它占用内容视图中的空间,以便水平滚动不会出现在它下面.谢谢！
解决方法
我为解决这个问题所做的是按如下方式构造代码.这将为包含我的过滤器组件和表的Panel创建一个垂直和水平滚动条.希望这可以帮助有类似问题的人.
@Override
protected void initComponent() {
super.initComponent();
if(!tableCreated) {
createSimCardsTable();
tableCreated = true;
}
mainWindow = this.getWindow();
Panel basePanel = new Panel("");
basePanel.addComponent(inventoryFilterPanel);
AbstractComponent separatorLine = Cf.horizontalLine(); //Of no signficance
separatorLine.addStyleName("m2m-horizontal-line-list-separator");
separatorLine.setWidth("99%");
basePanel.addComponent(separatorLine);
basePanel.addComponent(simCardTable);
basePanel.setSizeFull();
basePanel.getContent().setSizeUndefined(); // <-- This is the important part
addComponent(basePanel);
setExpandRatio(basePanel,1);
}
