i’ve created a alphabetical searchbar and set the Size to “Full” of each Button. But the Button won’t take all the place left on the right site.
If i’m adding width:100% as css it works fine. But that’s not the way i would like to fix it.
Quick example:
public class LayoutTestUI extends UI {
@Override
protected void init(VaadinRequest request) {
VerticalLayout alphabetSearchLayout = new VerticalLayout();
alphabetSearchLayout.setHeight(100.0f, Unit.PERCENTAGE);
alphabetSearchLayout.setWidth(SIZE_UNDEFINED, Unit.PIXELS);
String Alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (int i = 0; i < Alphabet.length(); i++) {
Button button = new Button(String.valueOf(Alphabet.charAt(i)));
button.setSizeFull();
button.setImmediate(true);
alphabetSearchLayout.addComponent(button);
}
Button button = new Button("Alle");
button.setSizeFull();
button.setImmediate(true);
alphabetSearchLayout.addComponent(button);
HorizontalLayout horizontalLayout = new HorizontalLayout();
Table table = new Table();
horizontalLayout.setSizeFull();
horizontalLayout.addComponent(table);
horizontalLayout.addComponent(alphabetSearchLayout);
horizontalLayout.setExpandRatio(table, 1.0f);
setContent(horizontalLayout);
}
}
If I understood correctly, you have an undefined width layout with 100% wide buttons inside it. That is not a valid combination. You should set a width 100% for the alphabetSearchLayout.
Hi,
I only want that all the buttons has the same width as the “Alle” (english: All) button at the end of the searchbar. If I set the layout width to 100% i have to struggle with setExpandRatio of the parent layout. And the result isn’t the same. When I add 100% width in css to the buttons it works like a charm. But it’s not added by setting setFullSize or setWidth(“100%”).
The current layout specs say that if no component define the width of a layout, then all child components are set to undefined width (same for height in horizontal layout).
So if all of your layout’s child components are 100% wide, none of them “define” the width of the layout, hence the layout can’t define the width of the 100% wide child components. So basically relative sized components don’t have a “natural/default/minimum” size, they all require the parent to tell their size.
This could be implemented, and you can achieve this using a bit of custom CSS.
Not tested, but you should just be able to set the width of the buttons yourself (the size set from the server-side is cleared by the internal logic which decides this is an invalid layout configuration):
