27. Vaadin 14. Problem with styles. (3) TextArea

0. Introduction

This post should be used combined with the last two posts.

1. TextArea Styling

This object HAS NO REFERENCE TO the textboxes !!!

1.0 Assign the Vaaadin Theme (For instance Lumo)

1.1 Create a file that contains general values of styles assigned to variables for instance "shared-styles.css" in the "frontend/styles" folder of your project with this info. Note that this file was created in the previous post and no additional information has been added.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

html { /* Example global custom CSS property definition */ /* 1. FORM FIELDS */ /* 1.1 enabled */ --ximo-field-color: black; --ximo-field-background-color: white; --ximo-field-font-weight: bold; --ximo-field-opacity: 1.0; --ximo-field-border-radius: 10px; --ximo-field-border-width: 1px 2px 2px 1px; --ximo-field-border-style: solid; --ximo-field-border-color: salmon; --ximo-field-margin-right: 15px; /* 1.2 disabled */ --ximo-field-disabled-color: gray; --ximo-field-disabled-background-color: white; --ximo-field-disabled-font-weight: bold; --ximo-field-disabled-opacity: 0.8; --ximo-field-disabled-border-radius: 10px; --ximo-field-disabled-border-width: 1px 2px 2px 1px; --ximo-field-disabled-border-style: solid; --ximo-field-disabled-border-color: thistle; --ximo-field-disabled-margin-right: 15px; /* 2. COMBOBOX */ /* 1.1 App Selector*/ --ximo-combo-color: maroon;; --ximo-combo-font-weight: bold; --ximo-combo-background-image: linear-gradient(to bottom right, lightpink, white); --ximo-combo-border-radius: 10px; --ximo-combo-border: 2px; --ximo-combo-border-bottom-style: solid; --ximo-combo-border-bottom-width: medium; --ximo-combo-border-bottom-color: saddlebrown; }

1.2 The file  "my-textfield-styles.css" in the "frontend/styles" folder is not needed for TextAreas, although it is needed for TextBoxes and ComboBoxes

1.3 Create a file called for instance "current-textarea-styles.css" in the "frontend/styles" folder of your project with this info. These are the styles definitively assigned to TextAreas. Take care!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/* General */ [part="input-field"] { color: var(--ximo-field-color); font-weight: var(--ximo-field-font-weight); background-color: var(--ximo-field-background-color); border-radius: var(--ximo-field-border-radius); border-width: var(--ximo-field-border-width); border-style: var(--ximo-field-border-style); border-color: var(--ximo-field-border-color); margin-right: var(--ximo-field-margin-right); opacity: var(--ximo-field-opacity); max-width: 35ch; min-width: 15ch; --lumo-disabled-text-color: var(--ximo-field-disabled-color); } /* disabled */ :host([disabled]) [part="input-field"] { border-color: var(--ximo-field-disabled-border-color); } /* For the label part of a text area */ [part="label"] { --lumo-disabled-text-color: var(--ximo-field-disabled-color); }

Take into account the different part of a TextArea ("input-field" and "label")

1.4 The class that holds the form should have a reference to all the "css" files, using @CssImport

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

@PageTitle("MainView") @Route("mainview") //... other stuff .... //General Vaadin theme @Theme(value = Lumo.class) //(1) //@ see https://vaadin.com/forum/thread/17197360/17863614 from Niels Nachname @CssImport(value="styles/my-textfield-styles.css", themeFor="vaadin-text-field") // (2) Select only Text fields @CssImport("./styles/shared-styles.css") // (3) General variable setting @CssImport("./styles/current-textfields-styles.css") // (4) Applied style to TextFields using previous variables @CssImport(value="styles/my-comboboxstyles.css" , themeFor="vaadin-combo-box") //(2A) Select only for Combos @CssImport("./styles/current-combobox-styles.css") // (4B) Applied style to TextFields using previous variables @CssImport(value="styles/current-textareastyles.css" , themeFor="vaadin-text-area") //(2B) Select only for TextAreas public class MainView extends VerticalLayout implements RouterLayout { private TextField myTF=new TextField(); private ComboBox myCmb01=new ComboBox<>(); private ComboBox myCmb02=new ComboBox<>(); private ComboBox myCmb03=new ComboBox<>(); private TextArea myTA=new TextArea(); public MainView() { myTF.setClassName("my-textfield"); //Important //myCmb01.setClassName("my-textfield"); --> No set classname for MyCmb01 as gets general CSS of [part="text-field"] myCmb02.setClassName("my-combobox-app"); // See current-combobox-styles.css myCmb03.setClassName("my-combobox-opt"); // See current-combobox-styles.css // No need to set Class for the textArea } //...other stuff