CODEWITHSUNDEEP
javavaadinvaadin-flow
Dullimeister
Dullimeister

Reputation: 554

Vaadin TextField readonly style

How can I change the style of a readonly TextField in Vaadin?

Now the default style after setting setReadOnly(true) is following:

enter image description here

I want this style with no border and an other backgroundcolor:

enter image description here

How can I achieve this?

Upvotes: 2

Views: 263

Answers (2)

Sergio2297
Sergio2297

Reputation: 36

I had the same problem and I corrected it by adding the next CSS selector to my styles.css (or any CSS file that your project loads)

.custom-textfield[readonly]::part(input-field) {
    --vaadin-input-field-readonly-border: none;
}

What I'm doing is setting a custom value to the property --vaadin-input-field-readonly-border that removes border.

Note that, I'm applying it to elements with the class name custom-textfield. If you want this behavior to all your TextFields, you can reassign the property's value in the .html selector of your styles.css file.

html, :host {
    --vaadin-input-field-readonly-border: none;
}

On this page, you can check all style properties for TextFields: Styling | Text Field

Upvotes: 2

James
James

Reputation: 708

you could try with this code for that particular text field you want to modify:

TextField textField = new TextField();
        textField.setReadOnly(true);

        // Remove border and set background color to gray
        textField.getElement().getStyle().set("border", "none");
        textField.getElement().getStyle().set("background-color", "gray");

it is worth noticing that if you want the whole application with that style please follow the documentation.
in there you can find how to customize all the text fields in your application.

Upvotes: 0

Related Questions