英文:
Vaadin: How to implement horizontal layout with scrollable column?
问题
我想要实现一个水平布局，其中表格内容区域位于左侧，基于手风琴的详细信息列位于右侧。内容区域应占据剩余的页面高度（基本上是100vh - 导航栏高度），并且不应超过该值。
问题出在详细信息列上，特别是手风琴上。展开的面板可能包含许多行，所以我将手风琴放在了一个滚动器内，但它不起作用。它不是获得一个可滚动的手风琴，而是扩展了根容器，我得到了一个可滚动的窗口。
简化的代码：
var grid = new Grid<>(Pojo.class, false);
var tableBox = new VerticalLayout(grid);
tableBox.setHeightFull();
var accordion = new Accordion();
accordion.setWidthFull();
var detailsBox = new Scroller(accordion);
detailsBox.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
detailsBox.setWidth("450px");
var layout = new HorizontalLayout();
layout.add(tableBox);
layout.add(detailsBox);
layout.setFlexGrow(1, tableBox);
layout.setFlexGrow(0, detailsBox);
layout.setSizeFull();
我正在使用Vaadin 24。
英文:
I want to implement a HorizontalLayout with the table content area on the left side and the accordion-based details column on the right. The content area should occupy the remaining page height (basically, 100vh - navbarHeight) and it should not exceed that value.
The issue is in the details column, specifically with the accordion. Expanded panels can contain many rows, so I put the accordion inside a scroller, but it's not working. Instead of getting a scrollable accordion, it expands the root container and I get scrollable window instead.
Simplified code:
var grid = new Grid<>(Pojo.class, false);
var tableBox = new VerticalLayout(grid);
tableBox.setHeightFull();
var accordion = new Accordion();
accordion.setWidthFull();
var detailsBox = new Scroller(accordion);
detailsBox.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
detailsBox.setWidth("450px");
var layout = new HorizontalLayout();
layout.add(tableBox);
layout.add(detailsBox);
layout.setFlexGrow(1, tableBox);
layout.setFlexGrow(0, detailsBox);
layout.setSizeFull();
I'm using Vaadin 24.
答案1
得分: 2
我认为您在布局组件上缺少明确的高度设置。尝试在layout、tableBox和detailsBox上使用setHeightFull()。
英文:
I think you’re missing explicit heights on the layout components. Try setHeightFull() on layout, tableBox, and detailsBox.
答案2
得分: 0
我明白了。所有的Vaadin布局控件基本上都是弹性容器。而这个任务不能仅仅用弹性布局来解决，但可以通过自定义CSS来解决，我是按照以下代码片段进行的。
https://stackoverflow.com/a/59550839/8817161
英文:
Ok, I got it. All Vaadin layout controls are basically flex containers. And this task isn't solvable with flex alone, but it can be solved with custom CSS, which I did following this snippet.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论