Disabled fields and read-only fields look the same - Default Theme - New UI - Forum - Rollbase - Progress Community

Disabled fields and read-only fields look the same - Default Theme - New UI

 Forum

Disabled fields and read-only fields look the same - Default Theme - New UI

This question is answered

Hello,

I have been using Kendo UI's readonly and enable properties for different fields i.e. comboboxes, dropdowns, date pickers, numeric text boxes etc and have noticed that there is a very subtle difference between readonly and disabled fields using the default theme. Is there a way that I can target all the disabled fields to apply one style element (for eg: background-color: grey) so that its easier to distinguish between readonly and disabled fields? If so, what are the selectors I need to target? Kindly let me know.

Cheers.

Iram

Verified Answer
  • Managed to do it with just CSS:

    .rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled],.rbs-editField-valueContainer > .k-multiselect.k-state-disabled, .rbs-editField-valueContainer > .k-dropdown > .k-dropdown-wrap.k-state-disabled > span {

    background-color: grey;

    }

    Thanks.

All Replies
  • Please try:

    .rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled]

    Regards,
    Siraj.
  • Doesn't work well with lookup selector fields(k-multiselect-wrap) and dropdown fields(k-dropdown). Any suggestions on how I can include them too please? Works well with the rest of the fields.

  • Revised Selector:

    $('.rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled],.rbs-editField-valueContainer .k-multiselect-wrap:has(input[disabled])').css('background-color','grey')

    Regards,
    Siraj.
  • Managed to do it with just CSS:

    .rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled],.rbs-editField-valueContainer > .k-multiselect.k-state-disabled, .rbs-editField-valueContainer > .k-dropdown > .k-dropdown-wrap.k-state-disabled > span {

    background-color: grey;

    }

    Thanks.