Hello everyone,

The Width parameter for the TelerikTextArea for Blazor will be part of our 2.21.0 release, which will be live hopefully by the end of this month. 

Peter, as an attached file of this post you can see a project which uses a TelerikTextArea set up with the Label and AutoSize = true and I have set the width of the component to 600px. Could you give this project a try and see if any differences cause the issue?

Regards,
Svetoslav Dimitrov
Progress Telerik

Hello Peter,

We plan to make some changes to the TextArea both internally as a team and as a whole web components division. That is why I am not able to provide any estimations on when this process will be completed. 

I agree that having a Width parameter would make the setup of the component easier. That being said, using CSS to style HTML elements is not considered a bad practice. When you run our components they are rendered as HTML in the browser. We encourage people to use CSS in order to customize the appearance of our components to suit their business needs.

Once the Width parameter is exposed the CSS provided below will be obsolete. One option is to delete the CSS class you have cascaded the rules from, another would be to delete the rules altogether. You could also let the width of the component be controlled by CSS and not the Width parameter.

Regards,
Svetoslav Dimitrov
Progress Telerik

Hello Jaroslav,

I have prepared an example that uses a conditional Class parameter to determine if there is a label and if so append a different class. 

Code snippet:

<TelerikButton OnClick="@(_ => LabelText = "My New Label")">Append a Label</TelerikButton> @*Click on this button to place a label for the component*@

<style>
    .myTextArea.k-input,
    .k-textarea {
        width: 400px
    }

    .k-floating-label-container, .text-area-labeled-width {
        width: 600px;
    }
</style>

<TelerikTextArea @bind-Value="@TextAreaValue" Label="@LabelText" Class="@(String.IsNullOrEmpty(LabelText) ? "myTextArea" : "text-area-labeled-width")"></TelerikTextArea>


@code {
    public string TextAreaValue { get; set; } = String.Empty;
    public string LabelText { get; set; } = String.Empty;
}

Regards,
Svetoslav Dimitrov
Progress Telerik

Hello René,

Currently, we did not expose the Width parameter, because there are planned stylistic changes to the component. For now, we suggest such changes be done by CSS, below I have made a quick example of how this could be achieved.

Code snippet:

<style>
    .myTextArea.k-input,
    .k-textarea {
        width: 140px
    }
</style>

<TelerikTextArea @bind-Value="@TextAreaValue" Class="myTextArea"></TelerikTextArea>


@code {
    public string TextAreaValue { get; set; } = String.Empty;
}

Regards,
Svetoslav Dimitrov
Progress Telerik