CODEWITHSUNDEEP
layoutscrollbarvaadinpanelhorizontal-scrolling
Tobi123
Tobi123

Reputation: 548

Vaadin: No Horizontal Scrollbar in HorizontalSplitPanel

I have a HorizontalSplitPanel in my Vaadin app. How can I get a horizontal scrollbar when I resize my browser?

In this Panel, I have a Menu on the left and the Content on the right. For the Content, I have a VerticalLayout for the MainLayout. This contains some HorizontalLayouts.

In my Servlet class:

    private HorizontalSplitPanel split = new HorizontalSplitPanel();
    split.setSizeFull();
    ...
    private VerticalLayout mainLayout = new VerticalLayout();
    private HorizontalLayout xyz = new VerticalLayout();
    mainLayout.addComponent(xyz);
    split.addComponent(mainlayout);

Vaadin documentation for HorizontalSplitPanel says:

So, I wanted to put my Mainlayout in a Panel and add the Panel to my Content Part (right side) of the HorizontalSplitPanel, BUT: I can ONLY add HorizontalLayouts to a Panel.

This:

    Panel panel = new Panal();
    panel.addComponent(mainLayout);

does not work.

Can anybody help me? I only found old answers from the Vaadin Forum, they won't work :(

Upvotes: 0

Views: 1243

Answers (1)

Morfic
Morfic

Reputation: 15508

Excerpt from the Vaadin Panel documentation:

Scrolling the Panel

Content Normally, if a panel has undefined size in a direction, as it has by default vertically, it will fit the size of the content and grow as the content grows. However, if it has a fixed or percentual size and its content becomes too big to fit in the content area, a scroll bar will appear for the particular direction. Scroll bars in a Panel are handled natively by the browser with the overflow: auto property in CSS.

Following the guidelines above, you could do something like this:

public class MyUi extends UI {
    private final static Logger logger = 
    @Override
    protected void init(VaadinRequest request) {
        Layout content = new VerticalLayout();
        content.setSizeFull();
        setContent(content);

        // add content to make the scrollbar appear
        VerticalLayout rightLayout = new VerticalLayout();
        for (int i = 0; i < 100; i++) {
            rightLayout.addComponent(new Button("Button " + i));
        }

        Panel rightPanel = new Panel(rightLayout);
        rightPanel.setSizeFull(); // <= this is important

        MenuBar menuBar = new MenuBar();
        menuBar.addItem("Some item", null);
        content.addComponent(new HorizontalSplitPanel(new VerticalLayout(menuBar), rightPanel));
    }
}

Resulting in a vertical scroll

Vertical scroll

Similarly, for horizontal scroll (just replace VerticalLayout rightLayout = new VerticalLayout(); with a HorizontalLayout)

Horizontal scroll

Upvotes: 3

Related Questions