Grid escaping container

I’m doing some prototyping and I’m running into a situation where a grid escapes the parent container (see screenshot) for small displays (mobile). I have a centered panel that fills 90% of the view, the panel has a 100%/100% VerticalLayout and the Grid is 100% width but looking at the DOM, there appears to be hard-coded style/width attributes (500px, v-grid-tablewrapper and style-fixed widhts for tr/td) even if I have no fixed widths anywhere in my design. Is it calculated when the component is generated and not when it’s rendered or something and is there a way of getting the Grid to keep within its parent boundaries?

Thanks in advance,
Nik
28209.jpg

Looks like a bug to me; could you please create at
http://dev.vaadin.com
?

In general, it would be interesting to know how the grid determines it’s size. I’ve managed to control the height with
grid.setHeightMode(HeightMode.ROW);
grid.setHeightByRows(data.size());
but the width wants to settle at 500px by default(?)

Try using the debug window (http://url?debug) and “analyze layouts” to see if you have some layout problems, e.g. grid with 100% width inside container with undefined/auto width. This would result in an undefined width for grid, which in turn means 500px as grid does not even try to make its width dependent on its content, unlike most layouts.