我正在开发一个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); }