Details component does not use full width

I have a simple form which correctly uses the full width available. However when I drop the form into a Details component it no longer uses the full width. Is this expected behavior or is there a correct way to set full with on the Details component as that does not seem to be part of the API.

Normal Form

@Route(value = "testform")
public class TestForm extends VerticalLayout
{
    private TextField field4 = new TextField("Field4");
    private TextField field1 = new TextField("Field1");
    private TextField field2 = new TextField("Field2");
    private TextField field3 = new TextField("Field3");
    private Checkbox field5 = new Checkbox("Field5");

    public TestForm()
    {
        ResponsiveStep responsiveStep1 = new ResponsiveStep("25em", 1);
        ResponsiveStep responsiveStep2 = new ResponsiveStep("32em", 2);
        ResponsiveStep responsiveStep3 = new ResponsiveStep("40em", 3);
        ResponsiveStep responsiveStep4 = new ResponsiveStep("50em", 4);
        FormLayout formLayout = new FormLayout(field1, field2, field3, field4, field5);
        formLayout.setResponsiveSteps(responsiveStep1, responsiveStep2, responsiveStep3, responsiveStep4);
        add(formLayout);
        setSizeFull();
    }
}

With Details Component

@Route(value = "testform")
public class TestForm extends VerticalLayout
{
    private TextField field4 = new TextField("Field4");
    private TextField field1 = new TextField("Field1");
    private TextField field2 = new TextField("Field2");
    private TextField field3 = new TextField("Field3");
    private Checkbox field5 = new Checkbox("Field5");

    public TestForm()
    {
        ResponsiveStep responsiveStep1 = new ResponsiveStep("25em", 1);
        ResponsiveStep responsiveStep2 = new ResponsiveStep("32em", 2);
        ResponsiveStep responsiveStep3 = new ResponsiveStep("40em", 3);
        ResponsiveStep responsiveStep4 = new ResponsiveStep("50em", 4);
        FormLayout formLayout = new FormLayout(field1, field2, field3, field4, field5);
        formLayout.setResponsiveSteps(responsiveStep1, responsiveStep2, responsiveStep3, responsiveStep4);
        Details details = new Details("Details", formLayout);
        add(details);
        setSizeFull();
    }
}

18180063.png
18180066.png

Tried it, can’t reproduce. Here’s the code I used (your last example isn’t adding the FormLayout to the parent):

@Route(value = "")
public class MainView extends VerticalLayout {

    private TextField field4 = new TextField("Field4");
    private TextField field1 = new TextField("Field1");
    private TextField field2 = new TextField("Field2");
    private TextField field3 = new TextField("Field3");
    private Checkbox field5 = new Checkbox("Field5");

    public MainView() {
        FormLayout.ResponsiveStep responsiveStep1 = new FormLayout.ResponsiveStep("25em", 1);
        FormLayout.ResponsiveStep responsiveStep2 = new FormLayout.ResponsiveStep("32em", 2);
        FormLayout.ResponsiveStep responsiveStep3 = new FormLayout.ResponsiveStep("40em", 3);
        FormLayout.ResponsiveStep responsiveStep4 = new FormLayout.ResponsiveStep("50em", 4);
        FormLayout formLayout = new FormLayout(field1, field2, field3, field4, field5);
        formLayout.setResponsiveSteps(responsiveStep1, responsiveStep2, responsiveStep3, responsiveStep4);
        Details details = new Details("Details", formLayout);
        add(details, formLayout);
        setSizeFull();
    }
}

18180474.jpg

Hi Olli, thanks for the reply. But I do not understand your example.

In your example the form does not expand and collapse when you toggle the details component.

My understanding is that I would add the form to the details component and then the details component to the outer vertical layout. It then correctly expands and collapses my form but with the width issue as originally reported.

Okay, now I understand what you mean. Details doesn’t implement HasSize so you can’t call e.g. details.setWidthFull() from Java code, but you can still use CSS to style it to make it fill the whole width of the layout. You can do this through normal CSS files or by accessing the Style object through the Element API (e.g. details.getElement().getStyle().set("align-self", "stretch");

Since VerticalLayout uses CSS FlexBox, you can set align-items: stretch; on the layout to make all unsized components inside the container as wide as the entire column. If you want to stretch the one Details only, you can use align-self: stretch on the Details’s Element like in the above code example. Setting width: 100% will work in a minimal scenario, too, but I’ve noticed that using a lot of percentage sizes inside FlexBox layouts tends to end up in weird unwanted behavior - it’s better to use flex-grow, flex-shrink and align-items.

Excellent thanks