No vertical scroll in browser

I’m developing a Vaadin application and am having extreme difficulty getting some aspects of the layout as I want. The major problem right now is that I can’t seem to get a vertical scroll in my layout no matter how big the size of the content is or how small the browser window is…

I have read up on the subject, I know that the hLayout and the vLayout doesn’t support scrollbars but the Panel do. I’ve tried in many different combinations to make it work but I’ve only managed to get a horizontal scrollbar to generate but never a vertical one.

Another problem is that I’m building the application inside an existing “template” provided by the company. This template contains a footer containing some copyright information. This footer doesn’t seem to occupy any space in the browser window with regards to the content I’m adding, which causes when viewing on smaller screens the horizontal scrollbar to appear “underneath” the footer, non-accessible… I’ll provide some of the code of how it looks now.

 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);
        
        }
    }

I would love to know if anyone sees any obvious errors in my code. And if anyone knows what property I can set on the footer CSS to have it occupy space in the content view so that the horizontal scroll doesn’t appear underneath it. Thank you!

Did you get it to work?

It’s a bit confusing (for example the fields you have listed doesn’t match the fields you use), but I think you have some problems there with component using setSizeUndefined() containing only component using setSizeFull() at least. Adding ?debug to your URL and click Analyze Layouts might help trying to figure it out.