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,