Set grid width automatically

Funnily enough, the problem that I continuously struggle with most on Vaadin (by far) is getting the width of components to work properly. Putting VerticalLayouts in side of divs and Dialogs (which are particularly difficult I find) and other stuff, and trying to get the component use the maximum or optimum width is always a painful trial and error process for me, to the point that I seriously try and avoid working on it!.

One issue that I just can’t understand how to get right is how to set a grid to use up the available page width. Sometimes it works but often not - I have no idea why?

In my latest case, I have a couple of text fields and a grid inside of a Polymer Template. The width of the template component takes on the width of the text fields but the grid gets a horizontal scrollbar. How can I get the grid to determine the width of the containing component without “fixing” the width to a discrete value? So the grid sizes itself optimally and the container takes on this size?

Any help welcome.

Hi Franz,

Unfortunately Grid is not really able to determine its own width based on its contents. There’s a ticket to add such a feature here:

Setting the width of a Grid or a VerticalLayout to 100% does make it take up the available horizontal space, provided that its parent element also has a a certain width (or some other css properties that determine its width), and if the parent’s width is in percentages, its own parent may also needs to have a width, etc, all the way to the UI root, depending on your UI’s dom structure.

As an example, if you have a Dialog or any other container that doesn’t have a specific width (or other css properties that give it a certain width), setting width:100% to its children will have no effect, as that would mean 100% of… well, nothing. E.g. Dialog has no width by default but sets its width based on its contents, so setting width:100% to a Grid inside it doesn’t work unless you also give the Dialog itself a width.

If you can post some example code here, or a screenshot of the DOM structure from the browser’s devtools, I could try to see where the problem is.