Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Unable to expand HorizontalLayout inside FormLayout to 100%
I'm pulling my hair to try to make an HorizontalLayout inside a FormLayout take all the available horizontal space.
My FormLayout has some fields that are displayed one below other with their proper caption to the left. That's fine, but now I want to put in a row a group of other components taking one half of the available space and put a button on the other (riight) side, which should be, again, 100% of the available space. That button will be as wide as the text it contains for its label and I want it centered, both vertically and horizontally.
I've almost accomplished my desire; I even have a caption for the HorizontalLayout which looks like the other rows of the form controls, so it looks nice. Except that the HorizontalLayout is not expanding to the available space, but just to accomodate the components that has inside it.
I've tried doing a .setWidth("100%") to my HorizontalLayout in several places of the code, both before and after adding it to the FormLayout. I've also done, after adding to it, a FormLayout.setExpandRatio(HorizontalLayout, 1), but that method is deprecated for FormLayout and does nothing, as per its JavaDoc:
Deprecated. This method currently has no effect as expand ratios are not implemented in FormLayout
Why is this deprecated? To my understanding, it should do what I'm needing.
I've even tried, desperately, to put two VerticalLayout inside my HorizontalLayout, and setting widths to them and playing with setExpandRatio, to no results.
In my crazyness, I even tried the ¿opposite? approach: putting a VerticalLayout inside the FormLayout (which in theory takes 100% of width automatically), then adding an HorizontalLayout inside it, and then, a couple of VerticalLayouts, and finally components in one and the button in the other. Results are the same. Even putting a setExpandRatio for each one.
However, in both approaches, if I inspect the HTML components in Chrome, I can set an inline width:100% style to the outer layer (although the children containers won't expand as they have a hardcoded size in pixels, probably generated on-the-fly according to their parent's width at the moment of generation).
What am doing wrong here??
Just a quick thought: have you set the width on the form layout? If not, try setting it in px.
At least with horizontal/vertical layouts, their child layouts/components with percentage width/height require that their parent has a defined size. I'm not sure if that requirement applies to form layouts.