Setting UI to undefined height hasn't expected effect

A UI per default has 100% width and height. The corresponding div in the browser (the one with the style v-ui) has then an inline style where width and height are both set to 100%. Therefore, this div has the size of the view port.
If I set the height of the UI to undefined, the div with the style v-ui no longer has an inline style which sets the height to 100%.
So far, everything as expected.
But even though the UI has undefined size and there is no inline style on the corresponding div setting the height to 100%, the div has still the same height as the view port. The reason is a css rule in the style sheet from the reindeer style which sets the height to 100% (Vaadin 7.1.10, reindeer/styles.css, line 1154).

I would have expected, that in case I set the UI to undefined height, the div with the style v-ui is as high as it’s content.

Is this a bug in Vaadin, respectively the reindeer style, or am I missing something?
Is it ok to override this style from the reindeer theme or should I better not do this?

I think nobody simply ever considered the case of setting the UI to undefined height :slight_smile: It should probably be investigated whether the height: 100% in reindeer could be removed without breaking anything else. In the meantime, does the workaround of adding
.v-ui { height: auto !important }
somewhere help?

Yes, it helps and it seems to work at first glance. But what I’m wondering is what you’re mentioning too: do I, by doing this, break something I don’t see right away? I hoped, that some Vaadin developer already knew the answer :slight_smile:

I think it’s been successfully used in some projects, especially on mobile where you often want the UI div to be larger than the viewport so that the browser’s native body scrolling works (touch browsers did not support overflow: auto/scroll very well until recent times). I think you’re safe to override the default, but please do
open a ticket
if you encounter any unexpected issues :slight_smile: