25. Vaadin 14. Problem with styles. (1) TextFields

0. Introduction

Themes in Vaadin are difficult to understand. Changing a CSS attribute may be a complicated and unsuccessful task.

1. TextFields styling

As Niels Nachname states:

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.

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

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; }

1.2 Create a file called for instance "my-textfield-styles.css" in the "frontend/styles" folder of your project with this info. The styles are redirected to intermediate variables

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 42 43 44 45 46 47 48

[part="input-field"]{ background-color: var(--my-background-color, 'auto'); color: var(--my-color, 'auto'); font-size: var(--my-font-size, 'auto'); font-weight: var(--my-font-weight, 'auto'); background-image: var(--my-background-image, 'auto'); border: var(--my-border, 'auto'); opacity: var(--my-opacity, 'auto'); border-radius: var(--my-border-radius, 'auto'); border-width: var(--my-border-width, 'auto'); border-style: var(--my-border-style, 'auto'); border-color: var(--my-border-color, 'auto'); border-bottom-style: var(--my-border-bottom-style, 'auto'); border-bottom-width: var(--my-border-bottom-width, 'auto'); border-bottom-color: var(--my-border-bottom-color, 'auto'); margin-right: var(--my-margin-right, 'auto'); } [part="input-field"][disabled] { background-color: var(--my-background-color, 'auto'); --lumo-disabled-text-color: var(--my-color, 'auto'); font-size: var(--my-font-size, 'auto'); font-weight: var(--my-font-weight, 'auto'); background-image: var(--my-background-image, 'auto'); border: var(--my-border, 'auto'); opacity: var(--my-opacity, 'auto'); border-radius: var(--my-border-radius, 'auto'); border-width: var(--my-border-width, 'auto'); border-style: var(--my-border-style, 'auto'); border-color: var(--my-border-color, 'auto'); border-bottom-style: var(--my-border-bottom-style, 'auto'); border-bottom-width: var(--my-border-bottom-width, 'auto'); border-bottom-color: var(--my-border-bottom-color, 'auto'); margin-right: var(--my-margin-right, 'auto'); }

1.3 Create a file called for instance "current-textfield-styles.css" in the "frontend/styles" folder of your project with this info. These are the styles definitively assigned to TextFields. You should assign the class "my-textfield" to the TextFields.

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

/* style assigned in openadmin.ui.forms.elements.FieldBindCreator IT IS USED IN CONJUNCTION WITH edu-textfieldstyles.css !!!! */ .my-textfield{ --my-color: var(--ximo-field-color); --my-font-weight: var(--ximo-field-font-weight); --my-background-color: var(--ximo-field-background-color); --my-border-radius: var(--ximo-field-border-radius); --my-border-width: var(--ximo-field-border-width); --my-border-style: var(--ximo-field-border-style); --my-border-color: var(--ximo-field-border-color); --my-margin-right: var(--ximo-field-margin-right); --my-opacity: var(--ximo-field-opacity); --lumo-disabled-text-color: var(--ximo-field-disabled-color); } .my-textfield:disabled, .my-textfield[disabled]{ --my-font-weight: var(--ximo-field-disabled-font-weight); --my-border-radius: var(--ximo-field-disabled-border-radius); --my-border-width: var(--ximo-field-disabled-border-width); --my-border-style: var(--ximo-field-disabled-border-style); --my-border-color: var(--ximo-field-disabled-border-color); --my-margin-right: var(--ximo-field-disabled-margin-right); }

Take into account of the variable --lumo.disabled-text-color  


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

@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 public class MainView extends VerticalLayout implements RouterLayout { private TextField myTF=new TextField(); public MainView() { myTF.setClassName("my-textfield"); //Important } //...other stuff }