浏览器中没有垂直滚动

Question

我正在开发一个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上设置什么属性,让它占用内容视图中的空间,以便水平滚动不会出现在它下面.谢谢!

Answer 1

我为解决这个问题所做的是按如下方式构造代码.这将为包含我的过滤器组件和表的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);

    }