Vaadin 10, how can I add the css class to div element in Java?

Question

I am trying to create a user list in UI cards like this,

<style type="text/css">
    .userbox {
        left: 36px;
        color: black;
        font-family: arial;
        font-size: 17px;
        font-weight: 600;
        width: 300px;
        height: 150px;
        text-indent: 30px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
    }

    .userbox:hover {
        background-color: #d1e7cd;
    }

    img {
        border-radius: 5%;
    }
</style>

I want to generate these HTML elements dynamically,

<div class="userbox"></div>

How can I do that? I tried to create Div objects and add the styles but I couldn't find a way in Vaadin Flow.

score 3 · Answer 1 · answered Aug 20 '18 at 05:43

3

This should be enough:

Div div = new Div();
div.setClassName("userbox");

answered Aug 20 '18 at 05:43

ollitietavainen

3,900
13
30

1

I think `div.getClassList().add("userbox")` should also work. – Jouni Aug 22 '18 at 12:21
2

[`setClassName`](https://vaadin.com/api/platform/10.0.4/com/vaadin/flow/component/HasStyle.html#setClassName-java.lang.String-)? Or did you mean [`addClassName`](https://vaadin.com/api/platform/10.0.4/com/vaadin/flow/component/HasStyle.html#addClassName-java.lang.String-)? The first wipes out all existing style names, to be replaced by your one and only style name, likely ruining the component’s presentation within a layout. The second adds your given style name alongside any existing style names. – Basil Bourque Aug 23 '18 at 01:35

Naranmandakh Tsogoo · Answer 2 · 2018-09-05T01:53:42.070

Div implemented HasStyle interface that interface has addClassName("") method:

public class Div extends HtmlContainer
public class HtmlContainer extends HtmlComponent
public class HtmlComponent extends Component implements HasSize, HasStyle

public interface HasStyle extends HasElement {

    /**
     * Adds a CSS class name to this component.
     *
     * @param className
     *            the CSS class name to add, not <code>null</code>
     */
    default void addClassName(String className) {
        getClassNames().add(className);
    }

In my case eclipse doesn't suggest it.

You can use it: divElement.addClassName("userbox");

Vaadin 10, how can I add the css class to div element in Java?

2 Answers2