TextArea background

Flow
1

How can i change my textarea background color to white? (i use vaadin 10)

I can change to any other colors but not to white. Please don’t be indifferent and reply.

Thanks.

2

In Java you should give class name to your TextArea

TextArea textArea = new TextArea("Text");
textArea.addClassName("colored-text-area");

Abnd then in “frontend/styles.html” add the following theme module:

<dom-module theme-for="vaadin-text-area" id="colored-text-area">
    <template>
        <style>
            :host(.colored-text-area) [part="input-field"]
{
                background:antiquewhite;
            }
        </style>
    </template>
</dom-module>
3

Tatu Lund:
In Java you should give class name to your TextArea

TextArea textArea = new TextArea("Text");
textArea.addClassName("colored-text-area");

Abnd then in “frontend/styles.html” add the following theme module:

<dom-module theme-for="vaadin-text-area" id="colored-text-area">
    <template>
        <style>
            :host(.colored-text-area) [part="input-field"]

{

            background:antiquewhite;
        }
    </style>
</template>
```

Thanks for reply, but how can i do it by css?

I don’t use html code in my project, only java.

4

Thanks for reply, but how can i do it by css?

In Vaadin 10 the theming is done in different way than it was with Vaadin 8 for example. The application specific styles are defined in “frontend/styles.html” file. This is due nature of the web components.

We have training video which explains this in detail: https://vaadin.com/training/course/view/v10-theming

5

Tatu Lund:

Thanks for reply, but how can i do it by css?

In Vaadin 10 the theming is done in different way than it was with Vaadin 8 for example. The application specific styles are defined in “frontend/styles.html” file. This is due nature of the web components.

We have training video which explains this in detail: https://vaadin.com/training/course/view/v10-theming

I tried but didn’t help. Maybe i’m doing something wrong.

So no other alternative ways to do it?

TextArea background still has backround color. I tried background: none: in css but no any changes.

6

Tatu Lund:
In Java you should give class name to your TextArea

TextArea textArea = new TextArea("Text");
textArea.addClassName("colored-text-area");

Abnd then in “frontend/styles.html” add the following theme module:

<dom-module theme-for="vaadin-text-area" id="colored-text-area">
    <template>
        <style>
            :host(.colored-text-area) [part="input-field"]

{

            background:antiquewhite;
        }
    </style>
</template>
```

Thank you so much, could do it, the problem was in import html file…

I did it like:

UI.getCurrent().getPage().addHtmlImport(“frontend://styles/htmlStyle/index.html”);

and all works

7

UI.getCurrent().getPage().addHtmlImport(“frontend://styles/htmlStyle/index.html”);

This is one way to do it. But more typical convention recommended for Vaadin 10+ applications is to use @HtmlImport in your MainLayout, something like:

@HtmlImport("styles.html")
public class MainLayout extends VerticalLayout implements RouterLayout {
...

If you do not specify path, it is assumed to be “webapp/frontend”

This is exaplained in video training I linked previously.