TextArea Html Styling

Flow
1

Hi.

I have two textAreas. For 1st one i want to make labels align row center, for the 2nd column flew-start. I give for every of them own Id and created separate html files for each. But when 1st textarea changes the 2nd one changes like the 1st, i can’t give them their own label align.

How can i do it?

2

Answer is here:

https://stackoverflow.com/questions/55195478/vaadin-13-textarea-html-styling?noredirect=1#comment97158055_55195478

3

JavaVaadin Vaadinjava:
Answer is here:

https://stackoverflow.com/questions/55195478/vaadin-13-textarea-html-styling?noredirect=1#comment97158055_55195478

Got another problem - flex-direction doesn’t work here. It works when we write like:

.vaadin-text-area-container {
flex-direction: column;
}

But it makes flex-direction: column for all textareas.

Any ideas how to make for each its own direction?

4

Anybody help with this problem, please.

Thanks!

5

You need to apply a different class name for the containers where you want a different flex-direction and create a new CSS rule for that.

6

Hi, Olli. Thanks for reply.

I have different classname for each textareas. And could set them this style only with html as Tatu Lund replied.

But I can set flex direction only like that:

.vaadin-text-area-container{
flex-direction: row;
}
I don’t know how to change textarea’s “vaadin-text-area-container” name.

7

It would be great if you could send some code which shows what you say.

Thanks!

8

You need to have in Java code

textArea1.addClassName("my-text-area1");
textArea2.addClassName("my-text-area2");

And styles.html

<dom-module theme-for="vaadin-text-area" id="style-for-text-area1">
    <template>
        <style>
            :host(.my-text-area1) [part="label"]
{
                ... styles here ...
            }
            :host(.my-text-area2) [part="label"]
{
                ... styles here ...
            }        
	    </style>
    </template>
</dom-module>
9

Tatu Lund:
You need to have in Java code

textArea1.addClassName("my-text-area1");
textArea2.addClassName("my-text-area2");

And styles.html

<dom-module theme-for="vaadin-text-area" id="style-for-text-area1">
    <template>
        <style>
            :host(.my-text-area1) [part="label"]

{

            ... styles here ...
        }
        :host(.my-text-area2) [part="label"]

{

            ... styles here ...
        }        
  </style>
</template>
```

Thanks for your reply.

But flex-direction doesn’t work there

<dom-module theme-for="vaadin-text-area" id="style-for-text-area1">
	<template>
		<style>
			:host(.my-text-area1) [part="label"]

{
flex-direction:row;
}
:host(.my-text-area2) [part=“label”]
{
flex-direction: column;
}


10

What you are trying to use the flex-direction for? There is no elements in label part that could be affected by direction change … so probably you want to apply the direction to different part.

If you aim to have the label on the left side of the value, then you need to do something like

<dom-module theme-for="vaadin-text-area" id="style-for-text-area">
    <template>
        <style>
            :host(.my-text-area) [part="label"]
{
 		        padding-right: 5px;
            }
            :host(.my-text-area) .vaadin-text-field-container {
                flex-direction: row;
            }    
        </style>
    </template>
</dom-module>

The above styles may also alter how the width and height of the component needs to be set to achieve the best looks.

Note also the added padding for the label.