Vaadin 14 - 无法获得 Details/AccordionPanel 以使用 window 宽度

Question

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

这是表格 class:

@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（有 setSizeFull()），这样我就返回了一个 Details -> VerticalLayout - > Grid，但这并没有改变什么。

Answer 1

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

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

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

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

Vaadin 14 - 无法获得 Details/AccordionPanel 以使用 window 宽度

Vaadin 14 - Cannot get a Details/AccordionPanel to use window width

java

vaadin14