First, let me thank you for adding the Width in the latest update (2.21). Much appreciated!
https://www.w3schools.com/tags/tag_textarea.asp
We need a fixed height for our text areas to encourage user-interaction and ease the UX for the end user. Having (now a wide), but very narrow description field is not ideal and since it's basically a feature of HTML5, I don't see why it be exempt from Blazor UI.
<TelerikTextArea Rows="10" Width="100%" />
<TelerikTextArea Enabled="false" @bind-Value="@VBO.BidScopeDescription" Width="100%"></TelerikTextArea>
I need the area to be read only , so I set enable to be false, but, I need the user to be able to scroll the text area, to read everything.
How should I do this?
Thanks
I would like to remove the resize handle and not let users change the size of the textarea.
---
ADMIN EDIT
A solution in the meantime can be done with CSS:
<style>
.no-resize.k-textarea > .k-input {
resize: none;
}
</style>
<TelerikTextArea @bind-Value="@taVal" Class="no-resize"></TelerikTextArea>
@code{
string taVal { get; set; } = "lorem\nipsum";
}---
There should be a counter displayed like this
"n:m" With n = currentNumberOfCharacters and m = allowedNumberOfCharacters.
I would like to be able to show or hide a character counter like in this demo by using a boolean parameter.
<AdminEdit>
Currently, this could be achieved as shown in this demo or from this example from the documentation:
<label for="myCustomTextAreaId">My Telerik TextArea</label>
<TelerikTextArea @bind-Value="@TextAreaValue"
Id="myCustomTextAreaId"
Name="myCustomTextAreaId"
PlaceHolder="Enter some Information"
AutoComplete="true"
TabIndex="2"
AutoSize="true">
</TelerikTextArea>
<div class="k-counter-container">
<span>@TextAreaValue.Length</span><span>/200</span>
</div>
@code {
public string TextAreaValue { get; set; } = String.Empty;
}</AdminEdit>
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.