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

Unlike many other Vaadin “container” components, the com.vaadin.flow.component.details.Details and com.vaadin.flow.component.accordion.AccordionPanel classes do not allow for setSizeFull() (I have tried both). I’m trying to figure out how to have one of these on a form and have it expand horizontally across the parent view. Instead, it’s showing a narrow view that is not very useful. It has some reasonable vertical size. I need to know how to control the size of this component.

Here is the form 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;
  }
    
  ...
}

I tried different variations, where I inserted a VerticalLayout (that has setSizeFull()) into the mix, such that I returned a Details -> VerticalLayout -> Grid, but that changed nothing.

Answer

Apparently Details and Accordion don’t implement HasSize, so they don’t have the required methods.

You can use the lower level element API to set the width and height as a workaround:

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

Another option is to use Alignment.STRETCH.

Advertisement

Answer