Spanning multiple columns within Details Component

I ran into a bit of an issue getting components contained in a Details component to span two columns.

Consider the following:

//Some parent layout
HorizontalLayout layout = new HorizontalLayout();

// TextArea is one of the components that I encountered the issue with (but TextField results in the same)
TextArea someText = new TextArea("Some Text");
Details details = new Details("View Some Text", someText);
details.getElement().setAttribute("colspan","2");
someText.getElement().setAttribute("colspan", "2");

layout.add(details)

This yields a two column wide Details component, but when it is opened, the containing TextArea component is not rendered as two column wide, but just one column wide.

There is a workaround (at least for my purposes);

//Some parent layout
HorizontalLayout layout = new HorizontalLayout();

// We need to wrap components that go into the Details component into a FormLayout (HorizontalLayout does not work for this)
FormLayout formLayout = new FormLayout();
formLayout.getElement().setAttribute("colspan","2");
TextArea someText = new TextArea("Some Text");
someText.getElement().setAttribute("colspan", "2");
formLayout.add(someText);

// And now pass the formLayout to the Details component, instead of the TextArea directly
Details details = new Details("View Some Text", formLayout);
details.getElement().setAttribute("colspan","2");

If you have a cleaner workaround or see where I simply made a mistake, please let me know.

HorizontalLayout doesn’t react to colspan - the component doesn’t have any “columns” as such. FormLayout does support colspan, but that’s because it’s a component where spanning multiple columns has a clear definition. If you’re using a layout other than FormLayout, you might want to use setWidth() to define the width of your component.