No vertical scroll in browser

Question

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

I read this thread, I know that hLayout and vLayout do not support scrollbars, but the panel does. I tried in different combinations to make it work, but I managed to get a horizontal scrollbar to generate, but never vertical.

Another problem is that I create the application inside the existing "template" provided by the company. This template contains a footer containing some copyright information. This footer does not seem to take any place in the browser window with regard to the content that I am adding, which causes when viewing on smaller screens the horizontal scroll bar that appears “below” the footer is not available ... I’ll provide some code of what it looks like 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 really like to know if anyone sees obvious errors in my code. And if anyone knows what property I can set on the CSS footer so that it takes up space in the content view so that horizontal scrolling does not appear below it. Thanks!

Answer 1

What I did to solve this problem was to structure the code as follows. This will create a vertical and horizontal scrollbar for the panel containing my filter component and table. Hope this helps someone with a similar problem.

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

Answer 2

All Vaadin components are undefined by default, so there is usually no need to call the setSizeUndefined() method. There is also no need to call setScrollable(true) , since it only allows you to use the software scroll feature.

When I tried to understand the meaning of scrolling, I wrote a simple layout skeleton. Try this as the contents of the main window:

 import com.vaadin.ui.HorizontalSplitPanel; import com.vaadin.ui.Label; import com.vaadin.ui.Panel; import com.vaadin.ui.VerticalLayout; public class Skeleton extends VerticalLayout { public Skeleton() { setSizeFull(); addComponent(new Label("Header component")); HorizontalSplitPanel splitPanel = new HorizontalSplitPanel(); Panel leftComponent = new Panel(); Panel rightComponent = new Panel(); splitPanel.setFirstComponent(leftComponent); splitPanel.setSecondComponent(rightComponent); for (int i = 0 ; i < 200 ; i ++) { leftComponent.addComponent(new Label("left")); rightComponent.addComponent(new Label("right")); } leftComponent.setSizeFull(); rightComponent.setSizeFull(); addComponent(splitPanel); setExpandRatio(splitPanel, 1); addComponent(new Label("Footer component")); } } 

You should see scroll bars inside nested panels. But if setSizeFull() is removed from the Skeleton layout, then it is not limited in size (by default) and grows down - then only the scroll bar of the whole window appears.

Answer 3

Add this to your styles.css

 .v-verticallayout > div { overflow-y: auto ! important; } 

Answer 4

First of all, try making your panel scrollable by calling the setScrollable (true) method, but this will not work if you set some kind of custom layout using setSizeFull () as the new layout of the panel.

If you know for sure that the application will be opened on the device with a small screen resolution, you can set a fixed width and height for your "main" / "main" layout or add a CSS style with parameters such as min-width: {some value} px, min-height: {some value} px.

Answer 5

Based on this post, I added vertical.setSizeUndefined(); and began to see vertical scrollbars.

 setMainWindow(new Window(title )); vertical.setSizeFull(); vertical.setHeight("100%"); toolbar = createToolbar(); vertical.addComponent(toolbar); vertical.setExpandRatio(toolbar, 0.03f); Component tree = buildTree(); vertical.addComponent(tree); vertical.setExpandRatio(tree, 0.97f); vertical.setSizeUndefined(); getMainWindow().setContent(vertical);> 

Answer 6

The only way I could fix this now (v6.8.14) is to specify a height in px values instead of%

Answer 7

Always use CustomLayout. It is faster, more efficient and, with ease of controlling html and css, you can get a graphically consistent result.