Multiline autoheight

[Alexander Kuhlmann]

Hello,

I need a multiline input that automatically adjusts its height.

And it would be great to define a maximum height, or maximum rowcount. If the text needs more lines, the scrollbar should appear.

Is this possible with Syncfusion components?

Thank you.

[UdhayaKumar Duraisamy]

You can achieve the requirement by dynamically changing the row value through the @oninput native event (triggered each time the user types a value). The code below sets up a Syncfusion TextBox with multiline input. It starts with one row and adds a new row for each new line character entered, up to a maximum of 5 rows. After reaching the maximum row limit, a scrollbar will appear for additional lines.

@using Syncfusion.Blazor.Inputs

 

<div style="margin:150px auto;width:500px">

    <h2>Auto Resize Textarea</h2>

    <SfTextBox ID="textarea"

               rows="@Rows"

               Multiline=true

               @oninput="@InputHandler"

               Placeholder="Enter your address"

               Width="400px">

    </SfTextBox>

 

</div>

@code {

    public int Rows = 1;

    public int MaxRows = 5; // Set your maximum limit here

    public string temp;

    private void InputHandler(Microsoft.AspNetCore.Components.ChangeEventArgs args)

    {

        temp = args.Value.ToString();

        var x = temp.Split('\n').Length;

        var y = temp.Split('\r').Length;

        var newRows = (x >= y) ? x : y;

        Rows = (newRows <= MaxRows) ? newRows : MaxRows;

    }

}

In the InputHandler method, the number of newline characters ('\n' and '\r') in the input is counted. The larger count is taken as the new row count. If this count exceeds the maximum row limit (MaxRows), the row count is set to MaxRows. This ensures that the TextBox starts with one row and adds a new row for each newline character entered, up to a maximum of 5 rows. After reaching the maximum row limit, a scrollbar will appear for additional lines.

Sample: https://blazorplayground.syncfusion.com/embed/BjVJNfWofqHVKnOA?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Alexander Kuhlmann]

Thank you for your solution.

But in this case not all visual linebraks are recognised.

If I write a long sentence the text breaks automatically at the end of the textbox. This is not calculated with your method, because this happens automatically inside the browser and not on the c# side of the application.

Do you see any workaround for this?

Thank you

[Alexander Kuhlmann]

Any suggestions how to solve this?

[UdhayaKumar Duraisamy]

If there is more text than the component can fit on its width, you can make the row height larger. For additional reference, kindly refer to the shared code snippet below.

@code {

    public int Rows = 1;

    public int MaxRows = 5; // Set your maximum limit here

    public string temp;

 

    private void InputHandler(Microsoft.AspNetCore.Components.ChangeEventArgs args)

    {

        temp = args.Value.ToString();

        var x = temp.Split("").Length;

        var y = temp.Split('\r').Length;

        var newRows = (x >= y) ? x : y;

 

        if (temp.Length > 30) //Here, you have to set the calculated character length based on the font type and width of the component.

        {

            int additionalRows = (int)Math.Ceiling((temp.Length - 30) / 30.0);

            newRows += additionalRows;

        }

        Rows = (newRows <= MaxRows) ? newRows : MaxRows;

    }

}