DateField in read only mode is ugly (double border)

When I set a DateField to read only mode, the button for date choosing disappears (this is OK), but the field has two borders: one for the whole field and one for part without the button (see attachment). How can I get rid of the inner border?

I guess you’re using some custom theming, since with the Reindeer theme I’m not seeing even one border on a read-only DateField - looks just like a label. If that is the case, I think you need to handle this in your own CSS.

Yes, you’re right: I use my colleague’s theme with clause:

.v-formlayout-contentcell .v-readonly {
    color: gray;    
    border: 1px solid gray;

But, when I remove it, there is no border at all in form layout. Does it exist a way, to have just one border all over the field?

The issue is that there’s a div as the base of the DateField which contains the TextField and a Button. Both the base div and the TextField have the “v-readonly” class name. So you could try adding something like this to the style:

.v-formlayout-contentcell .v-datefield.v-readonly {
    border: none;

Thank you, now it has just one border :slight_smile: