Enabling Adornments in a Disabled Inputs Component

Environment

Product

Progress® Kendo UI for Angular Inputs

Description

I am currently using the Adornments feature in a disabled Kendo UI for Angular Inputs component and I want to enable the elements inside the adornments section while preserving the disabled state of the entire component. Is there a way to achieve this behavior for the components in the package?

This Knowledge Base article also answers the following questions:

• How can I enable the elements inside the adornments section of a Kendo UI for Angular Inputs component while keeping the entire component disabled?
• Is it possible to interact with adornment elements in a disabled Kendo UI for Angular Inputs component?
• Can I have a disabled Kendo UI for Angular Inputs component with interactive adornments?

Solution

To allow the user interaction with the elements inside the prefix or suffix adornments section of a disabled Kendo UI for Angular Inputs component and ensure that they propagate their respective events:

1. Target the desired Inputs component using the .k-{component-name} selector and set the value of the CSS pointer-events property to all.

   css

   .k-textbox.k-disabled > .k-input-prefix > .k-button,
   .k-textbox.k-disabled > .k-input-suffix > .k-button {
       pointer-events: all;    
   }

2. (Optional) Apply some custom styling to the elements in the adornments section to ensure that they do not appear as disabled.

The following example demonstrates the suggested approach for the TextBox, TextArea, MaskedTextBox, and NumericTextBox components.

Change Theme

Theme

Loading ...

See Also

• Inputs Overview
• TextBox Adornments
• MaskedTextBox Adornments
• NumericTextBox Adornments
• TextArea Adornments
• API Reference of the TextBox Component
• API Reference of the TextArea Component
• API Reference of the NumericTextBox Component
• API Reference of the MaskedTextBox Component