How to create a HORIZONTAL Scrollbar in a Layout?????????

Vaadin 6 / 7 / 8 Framework UI
1

I have a layout and want a scrollbar in the botton when the content is wider that the window.
It does not seem to be possible?

Example code her

HorizontalLayout hl = new Hori…
Label label = new Label(some long text here);
hl.addC…(label)

etc etc
If I resize my browser I can’t get a scrollbar at the bottom

Tried a Panel, no success

/Tommy Stenberg

2

Layouts doesn’t support scrollbars, but panels do, so create a extra panel, add the layout to it, and put the panel there where you put the layout earlier. Use panel.setSizeFull() too.

3

Hej Jens!
hmm I can’t get it to work.
Here is the simple code.

public void init() {
Window mainWindow = new Window(“Vaadintest Application”);
Label label = new Label(“Hello Vaadin user”);
Label label1 = new Label(“Hello Vaadin user1”);
Label label2 = new Label(“Hello Vaadin user2”);
Label label3 = new Label(“Hello Vaadin user3”);
Label label4 = new Label(“Hello Vaadin user4”);
Label label5 = new Label(“Hello Vaadin user5”);
Panel panel = new Panel();
panel.setSizeFull();
panel.setScrollable(true);
HorizontalLayout hl = new HorizontalLayout();
hl.addComponent(label);
hl.addComponent(label1);
hl.addComponent(label2);
hl.addComponent(label3);
hl.addComponent(label4);
hl.addComponent(label5);
panel.addComponent(hl);
mainWindow.addComponent(panel);
mainWindow.setScrollable(true);
setMainWindow(mainWindow);
}

this code will not generate a horizontal scrollbar if you resize your browser, the text disappears behind the window.

/Tommy Stenberg
EdgeGuide AB

4

A quite common Vaadin gotcha. A Panel by default contains a VerticalLayout (width: 100%) which will prevent this from working. Replace this verticallayout by your horizontallayout using panel.setContent(hl); instead of panel.addComponent(hl). Another option is to make sure the verticallayout is undefined wide (i.e. will grow with content) by saying panel.getContent().setSizeUndefined() but then you will have an unnecessary layout in your application.

5

Thanks Artur!
The
panel.getContent().setSizeUndefined() worked
the other approach did not, wrapped the text around when resizing the window…

/Tommy Stenberg

6

This still does not work for me when I try to get vertical and horizontal scroll bars on my GridLayout (or actually on the Panel containing it.) Here is a synopsis of pertinent code:


// container panel for scrolling
Panel p = new Panel();
p.setStyle(Panel.STYLE_LIGHT);
p.setScrollable(true);
p.setSizeFull();

// main form area
GridLayout formArea = new GridLayout(8, 10);
formArea.setSizeUndefined();

// components are added to the GridLayout here
....

// add form to layout
p.setContent(formArea);

The scrollbars never show up regardless of the width and height of the contents or the browser window. What may I be missing?

EDIT: I resolved my issue. I forgot to mention the Panel is itself inside a HorizontalLayout. I had to setSizeFull() on the HorizontalLayout, then also had to call horLayout.setExpandRatio(p, 1f) and setExpandRatio(horLayout, 1f) on the parent object which is a VerticalLayout. Then it all looks good and appears to work.

7

I am also facing the same problem when adding Horizontal layout containing the table, the horizontal layout is added in panel but no scroll bars getting added.

Panel tablePanel = new Panel(); // Using panel to have a horizontal scroll bar for inside table.
table.setPageLength(sample.getAnalysisList().size());
table.setStyleName(“innerDataTable”);
table.setSizeFull();

		HorizontalLayout hr = new HorizontalLayout();
		hr.setSizeUndefined();
		hr.addComponent(table);
		
		tablePanel.setContent(hr);			
		tablePanel.setScrollable(true);
		tablePanel.setSizeFull();
8

Was this already answered
here
?
The questions are not quite identical, but if this was the same issue - please avoid double posting.

9

Following CSS will work for all Vertical Layout and Horizontal Layout no matter you are setting width and height as 100%

.vLayoutScroll > div{
overflow: auto !important;
}

10

works brilliantly thanks

11

Can you post working example with this CSS setting? Thanks

12

Hi i have created 4 gridlayout inside a vertical layout.
3 grids have less no of columns bt 1 grid has large no of column so i am not able to see all the columns.

I want horizontal scrollbar for that prticular layout.
i have already added scrollbar to panel bt it’s showing only vertical scroll bar not horizontal.

Plz help… thanks in advance

13
14

VerticalLayouts have a default width of 100%.
So something like this:
((VerticalLayout) panel.getContent()).setSizeUndefined();
might fix your problem.