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

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.

CodePudding user response：

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

Check if your css import specified with themeFor.

Example:

@CssImport(value = "./styles/my-charts-styles.css", themeFor = "vaadin-chart")

As you can see on screenshot, I did not override css. I did not add any additional css.

You can check this project and find if you get the same result as me. If you get no gap between the text and Icon, then there is some css bug with your main project.