Declined
Last Updated: 24 Mar 2021 13:03 by ADMIN
Bob
Created on: 23 Mar 2021 11:57
Category: Themes
Type: Bug Report
0
Blazor: The floating label of the TextArea overlaps the text
I am using the material theme and when text is typed in the textarea the floating label does not flush to the top of the component but overlaps the text.
3 comments
ADMIN
Preslav
Posted on: 24 Mar 2021 13:03

Hello Bob,

Generally speaking, our themes provide different layouts for our components.

For example, the Floating label in the Default theme TextArea is moved above the TextArea. Thus, when the user scrolls the content it does not overlap with the label.

On the other hand, our Material theme is following the Material Design guidelines. There, the label stays inside the TextArea, and it is scaled based on the user interaction. More information about this is available here - https://material.io/components/text-fields#input-types

 

Regards,
Preslav
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/.

Bob
Posted on: 24 Mar 2021 11:19
That does not make a lot of sense.  If this is truly a bug in Chromium, then why does it work just fine when using the Default Stylesheets and not when using the Material Stylesheets??
ADMIN
Preslav
Posted on: 23 Mar 2021 16:31

Hi Bob,

This behavior is caused by a bug in Chromium - https://bugs.chromium.org/p/chromium/issues/detail?id=81560

The Chromium dev team is not going to fix it, so we cannot resolve this problem on our side.

There is a possible workaround to add an element between the label and the textarea content that will separate them. This could be achieved with CSS similar to: 

        .k-floating-label-container .k-textarea::before {
          content: "";
          width: calc(100% - 17px);
          height: calc(6px + 1.125em);
          background-color: #f5f5f5;
          border-radius: 2px;
          display: block;
          position: absolute;
        }

        .k-floating-label-container .k-textarea:hover::before {
          background-color: #ebebeb;
        }

 

Regards,
Preslav
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/.