For my expand/unexpand feature, I am utilizing Vaadin Details.
Div contentDiv = new Div();
Label label = new Label("Expand");
Details details = new Details(label, contentDiv);
The current output looks like this:
https://i.sstatic.net/y8XQC.png
However, I want the expand icon to be on the right side. To achieve this, I used ThemeVariants like this:
details.addThemeVariants(DetailsVariant.REVERSE);
The updated output now looks like this:
https://i.sstatic.net/hmBAl.png
There is a significant gap between the text and the icon.
This spacing issue is caused by the default CSS applied to it.
:host([theme~="reverse"]) [part="summary"] {
justify-content: space-between;
}
In order to fix this, I tried to override the CSS by adding the following code to my CSS file with themeFor="summary", but it didn't work as expected:
:host([theme~="reverse"]) [part="summary"] {
justify-content: normal;
}
Expected Output:
https://i.sstatic.net/ngktF.png
Is there another way to achieve this in Vaadin? Or how can I successfully override the default CSS of ThemeVariants.
Note: My Vaadin version is 14.