Hello!
I am trying to put a NativeLabel and a TextArea inside a dialog, one below the other. The issue I am having is that there appears a scrollbar for a Dialog content element on the right side of the it because the TextArea overflows. I want the TextArea to fit in the dialog without this unneccesary scrollbar.
The issue does not occur if the TextArea is the only component inside a dialog. Also if we simply swap TextArea for Grid and put many items in it the issue does not occur (the grid fits nicely). Why it is not working with TextArea like with Grid and how to fix that?
I belive the overflow that occurs is precisely the height of this NativeLabel.
I think the issue in this topic is related to the same problem. But the solution didn’t work for me.
Source code
@Route
public class MainView extends VerticalLayout {
public MainView() {
add(new Button("New dialog", e -> new Dialog2().open()));
}
private class Dialog2 extends Dialog {
public Dialog2() {
setHeight(400, Unit.PIXELS);
setWidth(500, Unit.PIXELS);
setHeaderTitle("TestDialog");
NativeLabel label = new NativeLabel("TestLabel");
VerticalLayout labelLayout = new VerticalLayout(label);
TextArea textArea = new TextArea();
textArea.setSizeFull();
VerticalLayout textAreaLayout = new VerticalLayout(textArea);
textAreaLayout.setSizeFull();
VerticalLayout layout = new VerticalLayout(labelLayout, textAreaLayout);
layout.setSizeFull();
add(layout);
textArea.setValue("""
Lorem ipsum dolor sit amet, consectetur adipiscing elit.....
""");
}
}
}
In our app we have a custom BoldLabel class (that extends NativeLabel) that we wanted to put above the TextArea. TextArea::setLabel unfotunately accepts only a String parameter not a Component.
Anyway that does not fix the real issue. What if someone wanted to put ComboBox above the TextArea? I have checked it now and the issue still remains.
Ok, regardless I’m quite sure the problem is that the min-height of the VerticalLayout (which is effectively a normal flexbox) to be the unscrolled height of its contents.
It’s css flexbox behavior, which can sometimes be really annoying. Vaadin layouts are based on flexbox as the web doesn’t really give us better options (and we don’t want to build some kind of complicated javascript-based layouting system that would be guaranteed to have other issues).
The gist of it is that the default min-height of a vertical flexbox is the height of its contents, even if you set the flexbox’s height to 100%. The label and textarea combined are taller than the VerticalLayout, so the layout’s min-height is taller than its height, in which case min-height takes precedence.
We could set the min-height of VerticalLayout to always be zero by default, but that would cause breaking changes in existing apps.
The feature flag I mentioned in V24.7 is an attempt to work around this problem, and I would have expected it to work in this case too. It now occurred to me that you probably also need to disable the precompiled frontend bundle for it to work: How to configure development mode in Vaadin