Panel with horizontal scroll?

Hi, I’m trying to create a panel with scroll bars. For some reason I only get a vertical scroll and no horizontal one. This is a simplified version of the code, with the same problem:


public class GridtestApplication extends Application {
	@Override
	public void init() {
		Window mainWindow = new Window("Gridtest Application");
		setMainWindow(mainWindow);
		
		VerticalLayout layout = new VerticalLayout();
		layout.setSizeFull();
		mainWindow.setContent(layout);

		GridLayout grid = new GridLayout();
		grid.setColumns(5);

		for (int i = 0; i < 30; i++) {
			TextField t = new TextField();
			t.setValue("TEXTFIELD"+i);
			t.setWidth("250px");
			t.setHeight("250px");
			grid.addComponent(t);
		}
		
		Panel panel = new Panel();
		panel.setWidth("90%");
		panel.setHeight("90%");
		panel.addComponent(grid);
		panel.setScrollable(true);
		
		layout.addComponent(panel);
		layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
	}
}

I’ve tried to set different components’ sizes to fixed values, 100%, undefined,… But I can’t find a working combination. What am I missing?

Thanks!

Panel’s default root layout VerticalLayout has 100% width by default, so if it takes 100% of the width of the Panel, it can’t have horizontal scrollbar. You need to set either undefined or fixed width for it. For example: panel.getContent().setSizeUndefined();

Oh, thanks! I knew it had to be something simple. It works great.

Now I have a similar issue with FastGrids:

The thing is that I need to paint a quite complex grid, so I’m trying to optimize rendering time as much as I can. So one improvement is to remove depth of layouts: instead of using the default vertical layout of the panel, I replace the panel’s content with the grid.

That worked too. But I wanted to go a bit further and use FastGrid instead of GridLayout, and I’m having the same issue I had in the very beginning: only a vertical scrollbar is shown. Setting the grid size to undefined, didn’t work this time.

Am I hitting a limitation of FastGrids or is there a way to solve this? I found out that adding the fast grid to the default panel’s layout and setting the layout’s size to undefined as we first did with GridLayout makes the trick, but I would like to save this extra level which means an extra second under Firefox 3.6 for my app.

Thanks a lot!

I am having the same problem but it is not working for panel containing a horizontal layout which contains a table. Please find below the code snippet.

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

		tableLayout.addComponent(table);
		tableLayout.setSizeUndefined();
		
		tablePanel.setContent(tableLayout);	
				
		tablePanel.setScrollable(true);

Please let me know what wrong i am doing here.

The table must have undefined or fixed size, not full size. Otherwise you get two problems. First, you can’t have a 100% (full) size component inside an undefined size (shrink-to-fit) layout, as that would be a paradox. Second, the scroll bars won’t appear if the panel content takes 100% of the size, as they are needed only if it’s larger than that.

Thank you Marko Grönroos for reply… I got it work now. Below is code snippet…

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

		HorizontalLayout tableContainer = new HorizontalLayout();
		tableContainer.addComponent(table);
		tableContainer.setSizeUndefined();
		tableContainer.setStyleName("innerDataTable");
		
		tablePanel.setContent(tableContainer);			
		tablePanel.setScrollable(true);

I have the same problems: no vertical or horizontal scrollbars, even though I tried several methods from this and other posts. I added a “Panel”, called setScrollable(true), set size full, etc, etc, etc.
I hope Vaadin 7 will simplify this area…

here’s my code:

public abstract class Page extends  CustomComponent {
    abstract public String getNavigationPanelTitle();
}

public class ConfigureTaskPage extends Page {

    private void buildUI() {
        Panel panel = new Panel();
        panel.setScrollable(true);
        panel.setSizeFull();

        ComponentContainer layout = panel.getContent();

        setCompositionRoot(panel);

        name = new TextField("Name");
        layout.addComponent(name);

        name.setValue(config.getName());
        panel1 = getPanel(config.getConnector1());
        layout.addComponent(panel1);
        panel2 = getPanel(config.getConnector2());
        layout.addComponent(panel2);

        Button saveButton = new Button("Save");
        saveButton.addListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                save();
            }
        });
        layout.addComponent(saveButton);
    }

getPanel() method returns a subclass of FormLayout.