Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Change disable look of PopupDateField
I have just put in a bug report about the PopupDateField not handling going from "READONLY" and back again correctly. https://dev.vaadin.com/ticket/18200.
As a workaround I would like to change the look of the PopupDateField so that when I set "enable = false", it looks like I set the "readonly = true". I have tried to find the css that handles that so I can make the changes, but was not able to.
Thank you
Hi,
this seems to be a duplicate of https://dev.vaadin.com/ticket/17319. There's already a patch in code review at https://dev.vaadin.com/review/#/c/8257.
-tepi
I have looked at the patch, and I am in the process of trying to figure out how to apply it. Until then or I update to the version that includes that patch, I would still like to change the look of the field when it is disabled.
Thank you
Freddy
Can someone point me in the right direction on how to change the look of the field when it is disabled? I still would like to do that.
Thank you
Hey Freddy,
You can use SCSS to change the look and feel.
.v-datefield.v-disabled {
/* Add CSS properties, e.g. background-color: goldenrod; */
.v-datefield-textfield {
/* CSS properties */
}
.v-datefield-button {
/* CSS properties */
}
}
Joacim,
Thank you that was what I needed. Was able to resolve my issue with the following SCSS code.
.v-datefield.v-disabled {
opacity: 1;
color: black;
.v-datefield-textfield {
color: black;
background: transparent;
border-color: transparent;
}
.v-datefield-button {
opacity: 0;
}
}
Hi,
I used the below CSS to view the disabled textfield, textarea or select in proper way
.v-textfield.v-disabled.v-textfield-required {
opacity : 1;
background: #dddddd;
background-color: transparent;
border: 0px solid;
font-size:17px;
font-weight: bold;
}
.v-textarea.v-disabled.v-textarea-required {
opacity : 1;
background: #dddddd;
background-color: transparent;
border: 0px solid;
font-size:17px;
font-weight: bold;
}
.v-disabled .v-select-select{
opacity : 1;
background: #dddddd;
background-color: transparent;
border: 0px solid;
font-size:17px;
font-weight: bold;
}
Regards,