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.