I would like to create a grid with two columns:
The first column contans labels and shoud occupy as many space as needed
by the labels. The second column should expand to the rest of the available
space.
If I set the expand ratio of the second column that the first column disappears.
If I set the first one as well than the first column does not occupy what is
needed but the percentage defind by the expand ratio.
Please could you help how can I set up my grid the right way?
I have tried to copy the code from the book (6.4.1) but it has the very same problem
what my own implementation (the first column disappeares).
I do not know if it matters but I try to use the grid in a subwindow.
The example in book seems to be outdated. Labels are now days 100% width by default. If you want a label to define the minimum width of columns, set that labels with undefiend with setSizeUndefined() method.
I’ll fix a ticket for Marko to update the book.
A very simple code example below:
GridLayout grid = new GridLayout(2, 2);
grid.setSpacing(true);
grid.setWidth("250px");
grid.setHeight("250px");
Label l1 = new Label("Label 1<br/>with two rows",
Label.CONTENT_XHTML);
l1
.setDescription("Lable 1 that defines the first column width and first for height");
l1.setSizeUndefined(); // Labels are 100% wide by default;
String lorem =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc sagittis tortor lacinia sodales vitae id urna. Curabitur eget velit augue, id hendrerit orci. Pellentesque aliquet metus quis sem accumsan tempus. Nam pretium, lorem at facilisis pellentesque, tortor ipsum ornare ligula, cursus lacinia erat leo non lacus. Etiam sit amet est tempor neque consectetur congue ut sit amet libero. Aenean vitae suscipit est. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam neque libero, euismod a tempus vehicula, facilisis sed ligula. Fusce venenatis magna vel est elementum commodo. Donec pharetra nisl sed sem bibendum lacinia. Vestibulum at dui libero, ut ultricies nulla. In sit amet quam non sem pretium pellentesque eu nec est. Proin rhoncus fermentum scelerisque.";
Label l2 = new Label(lorem);
l2.setHeight("100%"); // fix height so text will clip will clip
Label l3 = new Label(lorem);
l3.setHeight("100%"); // fix height so text will clip will clip
Label l4 = new Label(lorem);
l4.setHeight("100%"); // fix height so text will clip will clip
grid.addComponent(l1);
grid.addComponent(l2);
grid.addComponent(l3);
grid.addComponent(l4);
grid.setColumnExpandRatio(1, 1);
grid.setRowExpandRatio(1, 1);
Thanks. Now the width seems to be ok. But I got a very strange result.
I have attached two pictures.
I have a grid, in the first column I have a label with undefined size and a combo box in the second with full size.
The first picture is how it displayed you can see that there are a lot of halfly drawn widgets what I never intended to be there.
The second screenshot is when I open the combo box by clicking on it. On this picture you can see that the list is misplaced.
On the third picture I have added a second row to the grid and the halfly drawn widgets are visible there also and the drop down list is misplaced as well
Please could you check if I can make it work some way.
The problem comes from your ComboBox that is setSizeFull(). That fill make the field height 100% as well, which isn’t supported by ComboBox.
Just use setWidth(“100%”) for the ComboBoxes instead of setSizeFull() and you’re all set.
If you care to know what’s happening exactly, here’s an explanation: Reindeer theme uses CSS sprites for all/most of its graphics (all theme images are in one image file, which is then positioned correctly for each element with background-position property). When you call setSizeFull for the combobox, the HTML element for the combobox gets a height bigger than is designed in the theme, causing unwanted images to show from the sprite image.
Thanks. setWidth instead of full size made the trick :).
It is almost perfect now. But… Now the height is not ok. I tried to remove the set height from the labels but it didn’t made any difference.
In the picture it can be seen that the height of the rows are occupied several lines instead of one. By resizing the window back and forth may result in the good layout (after a while).
This might be obvious, but is the grid height undefined? If you want the layout height to be as small as possible, you should set the height to undefined with
setHeight(null)
I have implemented Vaadin for one of my project. But now I am facing critical issues.
I have a grid which consist of 3 grids. My center grid has 2 rows for every one row in the 1st and 3rd grids.
Becuase of this I had to use 3 grids. Now I want hide the scrollbars which still appearing and want to scroll the 3 grids at the same time.
For now I am scrolling using a panel but that is not helpful becuase the headers get hidden while scrolling. So I am planning to scroll 3 grids at the same time.
But the main issue is I cannot remove those scroll bars.
If this cant be solved then I will have to stop using Vaadin. As it is becoming a roadblock in the middle of the project.
So I would appreciate your advice on how to overcome this issue.
For your reference I am enclosing the screenshot of my application.
