The code below produces a similar view what I currently have in a Lumo application. I’m planning a switch to Aura.
As you can see (if you run it) Lumo handles this kind of multiple layouts inside each other pretty well, but in Aura there is an extra scroll bar.
I can get rid of the extra scrollbar by not having the grid in a HorizontalLayout, but I’d rather not. Other views in my application have grids HorizontalLayouts too.
How does Lumo avoid the extra scrollbar? Can the same be done Aura too?
I played around with the css a bit and it seems like it might have something to do with lumo_components_grid. But I might be mistaken. I didn’t find the exact place what makes it work in Lumo.
public class MainView extends VerticalLayout {
private Registration styleReg;
private Span title;
private static String style = "aura";
private static boolean useHl = true, useTa;
private static final String lorem = """
Ut enim consequatur distinctio cupiditate quae. Dolor temporibus et vel veritatis eos.
Qui quibusdam suscipit laborum nulla. Molestiae quo laborum porro aperiam facilis. Omnis
laborum illum deleniti ex. Esse qui perspiciatis voluptates.
""";
public MainView() {
var menu = new MenuBar();
title = new Span();
menu.addItem("aura", event -> style("aura"));
menu.addItem("lumo", event -> style("lumo"));
menu.addItem("none", event -> style(null));
setTitle();
var header = new HorizontalLayout(menu, title);
var scroller = new Scroller();
var footer = new Div(new Text("footer"));
var div = new Div();
scroller.setContent(div);
var middleVl = new VerticalLayout();
div.add(middleVl);
var grid = new Grid<String>();
var ta = new TextArea();
var upperButtons = new HorizontalLayout();
var lowerButtons = new HorizontalLayout();
upperButtons.add(new Button("use Grid", event -> {
useTa = false;
reload();
}));
upperButtons.add(new Button("use TextArea", event -> {
useTa = true;
reload();
}));
lowerButtons.add(new Button("in HorizontalLayout", event -> {
useHl = true;
reload();
}));
lowerButtons.add(new Button("only Grid or TextArea", event -> {
useHl = false;
reload();
}));
ta.setValue(lorem + lorem + lorem);
ta.setValue(ta.getValue() + ta.getValue() + ta.getValue());
grid.addColumn(s -> s);
grid.addComponentColumn(s -> new VerticalLayout(new Button("doStuff1"), new Button("doStuff2")));
var items = new String[100];
for(int i = 0; i < items.length; i++) {
items[i] = "item " + i;
}
grid.setItems(items);
add(header, scroller, footer);
setFlexGrow(0, header, footer);
setFlexGrow(1, scroller);
if(useHl) {
var middleHl = new HorizontalLayout();
var instructions = new Html("""
<div><h3>Instructions</h3>
<p>%s</p></div>
""".formatted(lorem));
middleHl.add((useTa ? ta : grid), instructions);
middleVl.add(upperButtons, middleHl, lowerButtons);
middleVl.setFlexGrow(1, middleHl);
middleVl.setFlexGrow(0, upperButtons, lowerButtons);
middleHl.setSizeFull();
ta.setSizeFull();
} else {
middleVl.add(upperButtons, (useTa ? ta : grid), lowerButtons);
}
setSizeFull();
div.setSizeFull();
middleVl.setSizeFull();
grid.setSizeFull();
style(style);
}
private void setTitle() {
title.setText("useTa=" + useTa + " useHl=" + useHl + " style=" + style);
}
private void reload() {
UI.getCurrent().getPage().reload();
}
private void style(String style) {
MainView.style = style;
setTitle();
if(styleReg != null) {
styleReg.remove();
}
if(style == null) {
styleReg = null;
} else {
styleReg = UI.getCurrent().getPage().addStyleSheet(style + "/" + style + ".css");
}
}
}