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?
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.