This is a migrated thread and some comments may be shown as answers.

TextArea Disabled Styling Inconsistent

3 Answers 217 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 2
Veteran
Kyle asked on 08 Jan 2021, 02:55 PM

It appears that when we disable the TextArea, it does not match the styling of the other input components. My initial thought is that this is because of two things:

1. The <span class="k-textarea"> needs a k-state-disabled applied.
2. The themes need something like the following in the .scss:

.k-textarea {
    &:disabled,
    &[disabled],
    &.k-state-disabled {
        @include disabled( $disabled-styling );
        // Disabled selection
        &::selection {
            @include fill ( $color: $input-color, $bg: transparent );
        }
    }
}

 

I could be way off base here, of course.  Here's a StackBlitz showing the issue with a current, ugly, workaround: https://stackblitz.com/edit/react-s8ugrr-57r5pk?file=app/main.jsx

3 Answers, 1 is accepted

Sort by
0
Accepted
Silviya
Telerik team
answered on 11 Jan 2021, 09:02 AM

Hello Kyle,

Thank you for bringing this issue to our attention! You are right, there should be a k-state-disabled class applied to the span element in order for the disabled styling to be set correctly.

We will add this fix in our next dev version. In the meantime, you can apply the class via className property: 

https://stackblitz.com/edit/react-weewcx?file=app/main.jsx

As a token of gratitude, I updated your Telerik Points.

Best Regards,
Silviya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Kyle
Top achievements
Rank 2
Veteran
answered on 11 Jan 2021, 02:24 PM

Silviya,

This is perfect; thank you! I must've overlooked that .k-textarea already has the .k-state-disabled fill in _layouts.scss. DERP!

Kyle

0
Kyle
Top achievements
Rank 2
Veteran
answered on 15 Jan 2021, 02:08 PM
Tags
General Discussions
Asked by
Kyle
Top achievements
Rank 2
Veteran
Answers by
Silviya
Telerik team
Kyle
Top achievements
Rank 2
Veteran
Share this question
or