Customize Vaadin Details Expand Icon by overriding default css applied on it

Issue

I want expand/ unexpand feature and I use Vaadin Details for it.

Div contentDiv = new Div();

Label label = new Label("Expand");

Details details = new Details(label, contentDiv);

What it gives is following output:

But, what I want is the expand icon in right side. So for this I use ThemeVariants like this:

details.addThemeVariants(DetailsVariant.REVERSE);

What it gives is the following output:

There is huge gap between the text and Icon.

This is because of the below default css applied on it.

:host([theme~="reverse"]) [part="summary"] {
    justify-content: space-between;
}

So, Now I need to override this css. And what I have done is added below css code in my css file and added themeFor="summary" in import. But it did not work.

:host([theme~="reverse"]) [part="summary"] {
            justify-content: normal;
        }

Expected Output:

So, is there any other way to do this in Vaadin? Or how can I override the default css of ThemeVariants.

Note: I am using Vaadin 14.

Solution

One of the problem, when css did not work is wrong import.

Check if your css import specified with themeFor.

Example of css import:

@CssImport(value = "./styles/vaadin-details.css", themeFor = "vaadin-details")

In vaadin-details.css:

:host([theme~="reverse"]) [part="summary"] {
    justify-content: normal;
} 

Link to Vaadin documentation about css styling.

This is the commit where I got your expected result. Please, look how I import css file.

Also, as you correctly noted, this defect is reproduced when working with Div, not with Vertical Layout.

Answered By - Anton Serdyuchenko