Improve the appearance of disabled TextField to better presentation.

Flow
1

I’m using binder in the textfields and in some cases, some fields are not editable.
But the appearance is not good.

How the better way to improve this and what’s the code to this?

please, see the attached picture.

Thanks!
18529666.png

2

You probably need to alter the CSS of the TextField component. That requires to import CSS snipet for that component in Java code like:

@CssImport(value = "./my-text-field.css", themeFor="vaadin-text-field")

That will tell our frontend build to inject these specifc styles to that component instead of global scope. Then just target styles with readonly attribute.

:host([readonly]
) [part="input-field"]
 {
   .. your styles here ...
}

There is in detail learning resource about Vaadin theming styling here:

https://vaadin.com/learn/training/v14-theming

3

Thanks @Tatu Lund.

I’ll explore this.