Multiline asp:textbox (into a asp:gridview) auto adjust it's height according to the amount of text

José Santos 20 Reputation points
2024-09-22T01:38:55.3866667+00:00

Hi forums,

I would like to consult about a issue I am facing. I have a gridview where there is a textbox that is filled from a SQL DB when such info is called from a click event, but I want to adjust the height according to the amount of text is pushing into the textbox. I have tried with VB.NET and JavaScript but it does not work.

Thanks in advance!

<asp:textbox ID="descr" runat="server" Text='<%# Eval("descr")%>' MaxLength="430" ReadOnly="true" BorderWidth="0px" BorderColor="transparent" BackColor="#FFFFFF" ForeColor="#283A52" Font-Size="14px" Width="520px" Height="80px" style="margin-left:48px; resize:none; object-fit: scale-down; border-radius: 0px; padding-left: 0px; padding-top: 0px" Font-Names="arial" TextMode="MultiLine"></asp:textbox>  				

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
        var textAreaAdjust = function(control){//funciton to measure and set height
            control.style.height = "1px";
            control.style.height = (25+control.scrollHeight)+"px";
        };
        var textControl = document.getElementById("descr");//get the textarea
        textAreaAdjust(textControl);//pass it into the function
}​);
</script>

Private Sub textBox1_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim numberOfLines As Integer = textBox1.Lines.Length
    textBox1.Height = (numberOfLines + 1) * textBox1.Font.Height + textBox1.Margin.Vertical
End Sub
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,823 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,474 questions
VB
VB
An object-oriented programming language developed by Microsoft that is implemented on the .NET Framework. Previously known as Visual Basic .NET.
2,720 questions
Accepted answer
  1. SurferOnWww 2,741 Reputation points
    2024-09-22T04:18:45.01+00:00

    I want to adjust the height according to the amount of text is pushing into the textbox.

    It is virtually impossible (or at least not practical) to obtain height required to show the text in the textarea element (TestBox with TextMode="MultiLine"). Therefore, I suggest that you use the div element and Literal control instead.

    Shown below is a sample:

    .aspx.cs

    using System;
using System.Data;

namespace WebForms1
{
    public partial class WebForm42 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GridView1.DataSource = CreateData();
                GridView1.DataBind();

                GridView2.DataSource = CreateData();
                GridView2.DataBind();
            }
        }

        protected DataTable CreateData()
        {
            var table = new DataTable();
            table.Columns.Add(new DataColumn("id", typeof(int)));
            table.Columns.Add(new DataColumn("name", typeof(string)));
            table.Columns.Add(new DataColumn("descr", typeof(string)));
            
            var row = table.NewRow();
            row["id"] = 1;
            row["name"] = "aaa";
            row["descr"] = "Multiline asp:textbox (into a asp:gridview) auto adjust " + 
                           "it's height according to the amount of text";
            table.Rows.Add(row);

            row = table.NewRow();
            row["id"] = 2;
            row["name"] = "bbb";
            row["descr"] = "I would like to consult about a issue I am facing.";
            table.Rows.Add(row);

            row = table.NewRow();
            row["id"] = 3;
            row["name"] = "ccc";
            row["descr"] = "I have a gridview where there is a textbox that is filled " + 
                           "from a SQL DB when such info is called from a click event, " + 
                           "but I want to adjust the height according to the amount of " + 
                           " text is pushing into the textbox. I have tried with VB.NET " + 
                           " and JavaScript but it does not work.";
            table.Rows.Add(row);

            return table;
        }
    }
}

    .aspx

    <%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm42.aspx.cs"
    Inherits="WebForms1.WebForm42" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div.style1 {
            font-size: 14px;
            width: 520px;
            margin-left: 48px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <h2>textarea (TestBox with TextMode="MultiLine")</h2>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" />
                <asp:BoundField DataField="name" HeaderText="name" />
                <asp:TemplateField HeaderText="description">
                    <ItemTemplate>
                        <asp:TextBox ID="descr" runat="server" Text='<%# Eval("descr")%>'
                            MaxLength="430" ReadOnly="true" BorderWidth="0px"
                            BorderColor="transparent" BackColor="#FFFFFF"
                            ForeColor="#283A52" Font-Size="14px" Width="520px"
                            Height="80px" Style="margin-left: 48px; resize: none; object-fit: 
                            scale-down; border-radius: 0px; padding-left: 0px; padding-top: 0px"
                            Font-Names="arial" TextMode="MultiLine">
                        </asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

        <br />

        <h2>div tag instead of textarea</h2>

        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" />
                <asp:BoundField DataField="name" HeaderText="name" />
                <asp:TemplateField HeaderText="description">
                    <ItemTemplate>
                        <div class="style1">
                            <asp:Literal ID="Literal1"
                                runat="server"
                                Text='<%# Eval("descr") %>'>
                            </asp:Literal>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

    Reault

    enter image description here

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.