CODEWITHSUNDEEP
htmlvaadin-flow
Champ
Champ

Reputation: 51

how to use css flex-direction property in Vaadin 13?

In Vaadin 13 I want to use flex-direction for TextArea's labels in html style but it doesn't work

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

<dom-module theme-for="vaadin-text-area" id="style-for-text-area1">
    <template>
        <style>
            :host(.my-text-area1) [part="label"]{
                align-self: center;
                flex-direction: column;
            }
            :host(.my-text-area2) [part="label"]{            
                align-self: flex-start;
                flex-direction: row;
            }        
        </style>
    </template>
</dom-module>

for the 1st text-area I expect TextArea Label align column/center, for the second row/flex-start. Any ideas about how to solve this problem?

Upvotes: 0

Views: 219

Answers (1)

Tatu Lund
Tatu Lund

Reputation: 10643

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.

Upvotes: 1

Related Questions