I have a Details component, for which I want the summary view to look like:
| textleft textright V |
where the | are the edges of the view area and V is the toggle.
I cannot figure out how to do this. First of all, I cannot find any way to make the Details component itself expand to full width when the content is not showing. Toggling the content on does move the toggle icon all the way to the right, I think because the content does force the Details component to use the full width.
I guess an offshoot question is - what is the right way to have a row showing on the screen taking full width with a left justified component and a right justified component. In other areas I use the approach below and it works (HorizontalLayout with two children HorizontalLayouts, the second set to Alignment.END). However, it feels like there is probably a more elegant solution.
The below is my current code, though I have tried lots of other variations:
VerticalLayout authenticationSection = new VerticalLayout();
authenticationSection.addClassName("card");
masterLayout.add(authenticationSection);
HorizontalLayout authHeader = new HorizontalLayout();
authHeader.add(new Span("Authentication"));
authHeader.setWidthFull();
HorizontalLayout authHeaderInfo = new HorizontalLayout();
authHeaderInfo.setWidthFull();
// authHeaderInfo.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
authHeaderInfo.setAlignItems(FlexComponent.Alignment.END);
authenticationDesc = new Span();
authenticationDesc.setClassName("keytext");
authHeaderInfo.add(authenticationDesc);
authHeader.add(authHeaderInfo);
crcForm = new CRCForm();
crcForm.setMode(CRCForm.READ_MODE);
Details component = new Details(authHeader, crcForm);
component.addThemeVariants(DetailsVariant.REVERSE, DetailsVariant.FILLED);
authenticationSection.add(component);