AppLayout, FormLayout, MultiSelectListBox, in a desktop layout

Flow
1

I have a pretty standard layout:

public class RosterView extends AppLayout {
	public RosterView() {
		MultiSelectListBox<String> providerSelect = new MultiSelectListBox<>();
		providerSelect.items(IntStream.range(0, 100).mapToObj(i -> "Option " + i).toList());;

		FormLayout formLayout = new FormLayout();
		setContent(formLayout);
		formLayout.addFormItem(new VerticalLayout(new Scroller(providerSelect), new Button("Test")), "Providers");
	}
}

This will add a scrollbar at the AppLayout level, unfold the ListBox, and the button will initially not be visible. The user has to scroll down. I want this to look more like a desktop form and not a webpage, so the FormLayout’s size should equal the browser’s visible area, and the MultiSelectLixBox should get a scrollbar so that the button is visible.

It probably is something simple, but I can’t get it to work. What does work is setting a height in pixels on the vertical layout:

verticalLayout.setHeight("500px");

But that is not very dynamic.

2

I would go with a vertical layout (sizefull) as applayout content and apply flex grow 1 to the scroller - so more like this:

applayout

  • vertical layout size full
    – scroller flex grow
    — form
    – button

If that’s not going to work… the app layout container needs a css property, but I’m on mobile and can’t check

3

Yes, that would make more sense.

There a several problems in the original code shared:

  • FormLayout is intended for fields, not arbitrary layouts. You can add elements other than individual fields to it, and in many cases it works pretty well, but you’re already using it in an unintended way. Think of it as a layout for fields, not as an equivalent to the html <form> element.
  • Scroller needs a vertical size to do anything meaningful
  • MultiSelectListBox has its own scrolling, so there’s no reason to wrap it with a Scroller
4

Thanks for reacting guys. I have dropped in an horizontal layout with sizeFull, and in that two verticals with label, listbox, buttons (the actual layout is a bit more complex than the example). The layout stills runs out of the browser’s viewport. The only thing that works is setting the height of the listbox to something like 90%.

Maybe I am looking too much with Swing/JavaFX glasses to the layout situation.