1. Home
  2. Forum
  3. Blazor
  4. How to have Textbox with Multiline=true show 5 lines

How to have Textbox with Multiline=true show 5 lines

I am using SyncFusion.Blazor v18.2.0.44

I want to display a multiline text box with 5 rows of text. I found an earlier post inthese forums that indicated I could create a dictionary of properties for the Textbox HtmlAttribute property so I created the following in my *.razor.cs file.

        protected Dictionary<string, object> DescriptionHtmlAttribute { get; set; } = new Dictionary<string, object>()
        {
            { "rows", "5" },
        };

And my *.razor file has the following for my multiline textbox;

    <div class="form-group">
        <label for="description">Description</label>
        <SfTextBox id="description" Multiline=true CssClass="adjust-sf-padding"
                    @bind-Value="@ManageProductDetail.Description" HtmlAttributes="@DescriptionHtmlAttribute">
        </SfTextBox>
        <ValidationMessage For="@(() => ManageProductDetail.Description)" />
    </div>

However, it does not seem to have any effect on the number of rows in the textbox.

Any ideas?

6 Replies 1 reply marked as answer
SP Sureshkumar P Syncfusion Team July 14, 2020 01:26 PM UTC

Hi David, 
 
Greetings from Syncfusion support. 
 
This is known issue from our end. we have fixed this issue in out todays patch release 18.2.45 version. Please upgrade your Syncfusion package to resolve the issue.  
 
 
Regards, 
Sureshkumar P 


Marked as answer
DA David Adler July 14, 2020 01:33 PM UTC

Updating to v18.2.0.45 did fix the issue. Thanks.

SP Sureshkumar P Syncfusion Team July 15, 2020 05:10 AM UTC

Hi David 
 
Thanks for your update. Please get back to us if you need any further assistance on this. 
 
Regards, 
Sureshkumar P 


FR Francisco October 11, 2022 09:36 PM UTC

Was this changed in the newest versions? Not working on 20.3.0.48. The code bellow still loads with only 1 line.

        <div class="col">

            <SfTextBox ID="password" Multiline="true" HtmlAttributes="@DescriptionHtmlAttribute" CssClass="@cssClass" Type="InputType.Password" Placeholder="Password" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

        </div>

@code {

    private string cssClass { get; set; } = "e-outline";

    protected Dictionary<string, object> DescriptionHtmlAttribute { get; set; } = new Dictionary<string, object>()

        {

            { "rows", "5" },

        };

}





UD UdhayaKumar Duraisamy Syncfusion Team October 12, 2022 04:17 PM UTC

Hi Francisco,


We can directly bind the rows property to the TextBox component to increase the number of rows in the component. Please refer to the below code snippet and documentation for more details.


<SfTextBox ID="password" Multiline="true" rows="5" CssClass="@cssClass" Type="InputType.Password" Placeholder="Password" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>


Documentation : https://blazor.syncfusion.com/documentation/common/html-attributes#using-html-attributes-and-dom-events-in-the-input-element


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBoxRow978431317


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Regards,

Udhaya Kumar D



FR Francisco October 13, 2022 11:32 AM UTC

Thank you  Udhaya!


This works perfec


Loader.
Up arrow icon