TextArea AutoSize still not working on hidden containers

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 05 Oct 2023 11:18 by ADMIN

Thomas

Created on: 28 Sep 2023 11:44

Category: TextArea

Type: Bug Report

TextArea AutoSize still not working on hidden containers

I'm using Telerik Blazor 4.5.0 in my Server App and still can't use AutoSize on my TextAreas that are initial in hidden containers.

@page "/testpage"

<div class="row">
    <div class="col-2">
<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => tog = !tog)">Toggle</TelerikButton>
<div class="@(tog == false ? "d-none" : "d-inline")">
    <TelerikTextArea Name="textName" Id="text" AutoSize="true" @bind-Value="@Text"></TelerikTextArea>
</div>
    </div>
</div>

@code {

    public string Text { get; set; }
    public bool tog { get; set; } = false;

    protected override async Task OnInitializedAsync()
    {
        Text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,";

    }

    
}

The TextArea is initially at minimum height and only fits the content, when entering. See the attached screenshots.

Attached Files:

1 comment

ADMIN

Svetoslav Dimitrov

Posted on: 05 Oct 2023 11:18

Hello Thomas,

This is a limitation of how the AutoSize parameter works. This functionality is meant to work only for user input, and would not work for programmatically set values. The best possible solution is not to hide the component with CSS but to render it conditionally based on the tog value.

<div class="row">
    <div class="col-2">
        <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => tog = !tog)">Toggle</TelerikButton>
        @if (tog)
        {
            <TelerikTextArea Name="textName" Id="text" AutoSize="true" @bind-Value="@Text"></TelerikTextArea>
        }
    </div>
</div>

@code {

    public string Text { get; set; }
    public bool tog { get; set; } = false;

    protected override async Task OnInitializedAsync()
    {
        Text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,";

    }
}

That being said, I am marking this bug report as declined.

Regards,
Svetoslav Dimitrov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!