Blazor: The floating label of the TextArea overlaps the text

Web Themes Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 25 Jan 2022 16:04 by ADMIN

Scheduled for 2021.2

Bob

Created on: 23 Mar 2021 11:57

Type: Bug Report

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