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

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:

enter image description here

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:

enter image description here

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:

enter image description here

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.

cssvaadinvaadin-flowvaadin14


Solution 1:[1]

Use themeFor="vaadin-details" instead of themeFor="summary" and it should work.

Also, use justify-content: start;. There’s no normal value for that property: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jouni

Related Questions