Grids with no scrollbars

Vaadin 6 / 7 / 8 Framework UI
1

I had been using the Table component in custom widget with ‘setSizeUndefined’ which caused the table to display without scrollbars. I am trying to replace the table with grid but without setting width to a size that is big enough to show all the columns I end up with scrollbars. The widget I am creating is reusable and can have varying numbers of columns so I don’t know ahead of time how big I need to make it for it to display without scrollbars.

Should a grid with a size of undefined grow to show all columns without scrollbars and I am doing something wrong?

If not, how can I get the grid to size itself to not show scrollbars?

I am using Vaadin 8.1.6.

2

grid.setSizeUndefined(); should make the width flexible - for each column you add, it should add more space to the right to accomodate

The same for height is grid.setHeightMode(HeightMode.UNDEFINED);. Then the height will grow with rows.

With those two rows you should have a solution that doesn’t have scrollbars.

3

I can’t seem to get this to work. I created a small test to demonstraight what I am seeing.

I created a bean like the following (setters/getters excluded).

public class TestBean {
    private String field1 = "one is a lonely number";
    private String field2 = "A longer two";
    private String field3 = "three with some to go";
    private String field4 = "four of us";
    private String field5 = "five on time";
    private String field6 = "six in the air";
..

Then I added a button to my application to create a grid with this bean in it and display it in a window, the code below.

Button button = new Button("Test");
button.addClickListener(event -> {
    Grid testGrid = new Grid(TestBean.class);
    List<TestBean> items = new ArrayList<>();
    items.add(new TestBean());

    testGrid.setItems(items);
    testGrid.setWidthUndefined();
    testGrid.setHeightByRows(1);

    Window w = new Window("TEST");
    w.setWidth("800px");
    w.setHeight("300px");
    w.center();

    w.setContent(testGrid);

    UI.getCurrent().addWindow(w);
});

Which produces the following (see attached image). I want the grid to expand its width dynamically so there are no internal horizontal scrollbars but even though I set the grid to undefined width I still see horizontal scrollbars. I also tried adding the grid into VerticalLayout (with 100% width) and then into the window but I got the same result.


39421.png

4

Hmm. That is curious. Your code looks correct and it should work. I guess some debugging might be needed to figure it out.

Could you still try out with The VerticalLayout in between as the content of the window and give VerticalLayout setSizeUndefined()? Does it behave the same way if you don’t have a window, but instead you put the testGrid in the same layout where the button is?

5

I see the scrollbars even if I add the grid into a veritcal layout with undefined size and then into the Window. I am working on porting some old code we developed that used tables and moving it to use grids. In the older logic using tables (on Vaadin 7) and setting the tables width to undefined I see the expected behavior. I have not been able to see grid expand to fit all columns without scrollbars.

6

Some of my Vaadin 7 Tables include a “descr” column, which may return a lengthy text. With
beanTable.setColumnExpandRatio(“descr”, 0.1f);
no scrollbars are displayed and all columns are visible.
I also display the descr column values in a tool tip (ItemDescriptionGenerator) for the cell, by the way.
With the Grid, which should replace the Table as I understand, I haven’t been able to get the same behavior.
Presently I use a SizeReporter to achieve a dynamic width for the descr column knowing that this is not the preferred solution.

mytheme.scss:
.my-grid {
.v-grid-scroller-horizontal {
display: none;
}
}

A documentation on how to achieve the proper column expansion for the Grid would be very appreciated.