如何解决Vaadin 8:您可以在 TreeGrid 组件列的 HorizontalLayout 组件单元格中右对齐 Button 吗?
我有一个包含 2 个组件列的 TreeGrid。第一个组件列包含一个带有标签和按钮的 HorizontalLayout。第二个组件列包含一个带有 Button 的 HorizontalLayout。我无法右对齐第一个组件列中的 Button。可行吗?如果它不可行,您有任何解决方法建议吗?我的约束是 TreeGrid,两列,第一列应该包含一个标签和一个右对齐的按钮。 到目前为止我尝试了什么
TreeGrid<Object> treeGrid = new TreeGrid<>();
treeGrid.setSizeFull();
treeGrid.addComponentColumn(vp -> {
Button button = new Button("button");
HorizontalLayout cell = new HorizontalLayout(new Label("label"),button);
cell.setSizeFull();
cell.setExpandRatio(button,1.0f);
cell.setComponentAlignment(button,Alignment.MIDDLE_RIGHT);
return cell;
}).setCaption("st column").setExpandRatio(1).setId("st column");
treeGrid.addComponentColumn(vp -> new HorizontalLayout(new Button("some other button")))
.setCaption("nd column").setId("nd column").setWidth(200.0d);
TreeData<Object> objectTreeData = new TreeData<>();
objectTreeData.addRootItems(new Object());
treeGrid.setDataProvider(new TreeDataProvider<>(objectTreeData));
window.setContent(treeGrid);
UI.getCurrent().addWindow(window);
window.center();
window.setWidth("40%");
window.setHeight("40%");
解决方法
看起来节点没有设置宽度,HorizontalLayout 的整个宽度从节点而不是整个单元格中获取该宽度。
作为一个稍微有点麻烦的解决方法,您可以使用 StyleGenerator 为列指定样式名称 (column.setStyleGenerator(item -> "myColumn");
),然后将诸如 ".myColumn .v-treegrid-node {width:100%;}
之类的内容添加到您的主题中。如果您的主题现在将内容稍微向右推得太远,您也可以添加一些填充来抵消:.myColumn .v-horizontallayout {padding-right: 10px;}"
如果您添加一些层次结构,您可能需要为每个级别添加更多填充:.myColumn .depth-1 .v-horizontallayout {padding-right: 26px;}
、.myColumn .depth-2 .v-horizontallayout {padding-right: 42px;}
等等(实际值取决于您的主题)。使用普通 Valo 会为每个深度级别增加 1em (16px) 的缩进,这是您需要解决的问题。
对于更复杂的 SASS 解决方案,请参阅Valo does the indenting。请记住在计算中添加从 depth-0 级别的基本填充。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。