时间戳

首页 > 解决方案 > Vaadin 14 - 无法让 Details/AccordionPanel 使用窗口宽度

java - Vaadin 14 - 无法让 Details/AccordionPanel 使用窗口宽度

问题描述

与许多其他 Vaadin“容器”组件不同，com.vaadin.flow.component.details.Detailsandcom.vaadin.flow.component.accordion.AccordionPanel类不允许setSizeFull()（我都尝试过）。我试图弄清楚如何在表单上使用其中一个并让它在父视图中水平扩展。相反，它显示了一个不是很有用的狭窄视图。它有一些合理的垂直尺寸。我需要知道如何控制这个组件的大小。

这是表单类：

@CssImport("./styles/shared-styles.css")
public class EditTaskForm extends VerticalLayout {

  ...
  private Grid<TaskNote>          grid;

  public EditTaskForm() {
    this.addClassName("edit-task-form");
    this.setSizeFull();
    configureView();
    ...
  }
    
  private void configureView() {
    Div title = new Div();
    title.setText("Edit Task");
    title.addClassName("page-title");

    add(title, configDetails(), configNotes(), configDates(), configButtons());
    setDefaultHorizontalComponentAlignment(Alignment.START);
  }

  ...

  private Component configNotes() {
    grid = new Grid<>();

    grid.addColumn(TaskNote::getNote).setHeader("Note");

    grid.addColumn(new LocalDateTimeRenderer<>(TaskNote::getDateCreated, "MM/dd/yyyy HH:mm:ss"))
        .setHeader("Created");
    grid.addColumn(new LocalDateTimeRenderer<>(TaskNote::getDateModified, "MM/dd/yyyy HH:mm:ss"))
        .setHeader("Last Modified");

    grid.getColumns().forEach(col -> {
      col.setAutoWidth(true);
      col.setResizable(true);
    });

    grid.asSingleSelect().addValueChangeListener(event -> {
      editNote(event.getValue());
    });

    Details details = new Details("Notes", grid);
    details.setOpened(false);
    return details;
  }
    
  ...
}

我尝试了不同的变体，我在混合中插入了一个VerticalLayout(that has setSizeFull())，这样我返回了一个Details-> VerticalLayout-> Grid，但这没有任何改变。

标签： javavaadin14

解决方案

显然，Details 和 Accordion 没有实现 HasSize，因此它们没有所需的方法。

您可以使用较低级别的元素 API 来设置宽度和高度作为解决方法：

details.getElement().getStyle().set("width", "100%");

另一种选择是使用Alignment.STRETCH.

推荐阅读