Change disable look of PopupDateField

Flow
1

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

2

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

3

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

4

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

5

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 */
  }
}
6

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

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,