Is it possible to get the size that a parent layout takes up in a browser, based on the size of the browser window that the user has resized, and then adjust the size of child components that are in that layout? For example, if we had two RichTextArea components that needed to have a width of 25% of the parent layout’s width and then a height that is the same as the width (so each is square), is that possible to do? Then, when the user resizes the browser, we can recalculate the H and W of each again?
Hi,
You could probably use the Responsive extension (
https://vaadin.com/download/release/8.1/8.1.6/docs/api/com/vaadin/server/Responsive.html
). It is meant for resizing components according to their parent’s size with SCSS/CSS, as shown in the example at the API page I linked.
BR,
Katri
With little bit of CSS trickery it’s possible to create component which has a fixed aspect ratio. You can then just specify the component width relative to it’s parent (e.g. set width to 25% and use the component inside a CssLayout) and have the browser resize the height when the parent’s width changes.
The component and a UI stub:
See the full sample on vaadinfiddle.com
The theming that makes it retain aspect ratio:
See the full sample on vaadinfiddle.com