Horizontal Scroll bar won't show until width is set

Vaadin 6 / 7 / 8 Framework UI
1

Hi, I’m trying to link a Vaadin table to a database via SQLContainer and TableQuery. But I have a table with 21 column, and a horizontal scroll bar is not added unless I specify the width of the table. Vertical one shows up, but not the horizontal one. I’ve tried adding it inside a panel, setting both component’s width to undefined and full and all combination possible. But the only way to get the horizontal bar displayed on the table is to set a specific width or % width. I’ve looked through the forums and the bug was “fixed” but I’m still seeing it. Am I missing anything?

SimpleJDBCConnection = null;
TableQuery tq = null;
SQLContainer container = null;

try {
   connection = new SimpleJDBCConnectionPool( Connection Params);
   tq = new TableQuery("tablename", connection);
   container = new SQLContainer(tq);
} catch {
   //Error
}

Table table = new Table();
//table.setWidth("100%");
table.setContainerDataSource(container);
2

I assume it’s still a bug?

3

Hi,

could you post a link to the ticket (or the forum post) you’re referring to? As far as I remember correctly, the table should not render a horizontal scrollbar if the width is undefined - then it will just expand to make room for the columns, and clip out of the layout if it does not fit.

4

Here’s the
link

I don’t understand what you meant by “clip out”, but what it does is that it expands but all the columns that go beyond the layout width is not displayed. Setting the width creates a horizontal scrollbar and able to view all the columns. I was under the impression that it’ll create a horizontal scroll bar if the table width is greater than layout’s width. It does so if table’s height is greater than layout’s height.

5

Hi,

ok, let me show an example:

package com.example.tablescroll;

import com.vaadin.Application;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Table;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class TablescrollApplication extends Application {
    @Override
    public void init() {
        Window mainWindow = new Window();
        ((VerticalLayout) mainWindow.getContent()).setSpacing(true);
        setMainWindow(mainWindow);

        Table t = buildTable();
        mainWindow.addComponent(t);

        Panel p = new Panel();
        p.setWidth("100%");
        p.getContent().setSizeUndefined();
        p.addComponent(buildTable());
        mainWindow.addComponent(p);

        Table t2 = buildTable();
        t2.setWidth("100%");
        mainWindow.addComponent(t2);
    }

    private Table buildTable() {
        Table t = new Table();
        for (int i = 0; i < 50; i++) {
            t.addContainerProperty("prop" + i, String.class, null);
        }
        t.addItem(new Object());
        return t;
    }
}

This will render three Tables for you:

  2. First one has undefined width and it is inside a 100% wide VerticalLayout → no horizontal scroll bar → Table (or any content) will be “clipped out”
  3. Second one has an undefined width Table within a Panel that has undefined width content → No scroll bar on Table, but there is one on the Panel
  4. Third one has the Table’s width set to 100% → Table will get horizontal scroll bar

One more “case” is that you set the main window’s layout to undefined width and then add a Table with undefined width within it. Then you will get a horizontal scroll bar for the whole main window. Since Window extends Panel, this is essentially the same case as #2.

All the cases are functioning as designed and per the layout rules. If none of these options are what you want, then please explain (or draw a pic) of what exactly should happen in your case.

The vertical scroll bar will be in the table due to the implicitly set height of Table. Even if you do not set the height (i.e. it is undefined), there is a pageLenght set for the Table (default is 15) which will dictate the height. If your Table has over 15 rows, it will then get a vertical scroll bar.

6

Thanks for the explanation.

MainWindow - undefined size
MainWindow contains a vertical layout. It has set width 800px.
The MainWindow vertical layout with set size contains another VerticalLayout. This inner layout size is undefined.
The above mentioned Vertical Layout contains the table. Number of columns for the table differs. Some has 22 and others only 3.

I’ve tried the second case, the problem with that is one would have to scroll all the way to the right to see that there is a vertical scroll bar. Which is an usability issue.

What I want is effect of Case 3 only if the size of the table is greater than size of the layout its added to. Is that possible? If I don’t explicitly set the size of the table, nothing is returned by table.getWidth();

Another thing that would solve my issue would be if the Vertical Scrollbar is added to the panel.