how to scroll asp.net textbox to bottom

Question

I'm building a website with text box containing log messages. the log is getting updated using AJAX.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <ContentTemplate>
        <asp:TextBox ID="TextBox1" runat="server"                                 
            onload="textbox_load"
            Height="110px" 
            TextMode="MultiLine"             
            Width="100%">
        </asp:TextBox>    
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

I need to scroll the text box down every time it gets updated. How?

score 3 · Accepted Answer · edited Feb 08 '12 at 19:22

3

Handle the Sys.WebForms.PageRequestManager.endRequest event and scroll the textbox down:

var tbox = $get('<%= TextBox1.ClientID %>');
tbox.tbox.scrollTop = tbox.scrollHeight;

edited Feb 08 '12 at 19:22

Tim Schmelter

450,073
74
686
939

answered Sep 07 '09 at 08:20

Tadas Šukys

4,140
4
27
32

.scrollDown() seems to be not defined! I'm getting a javascript exception – ala Sep 07 '09 at 08:36
Im trying this but to now effect, where should the above script go exactly? I have it outside my html tags, inside beside my textbox and neither works, scroll bar remains at the top of the textbox after every refresh! – Fearghal Jan 30 '15 at 00:30
Worked for me. For testing, I didn't create the variable, but I'm using this code to scroll the TextBox control in a Content Page from a Master Page. Here is my working, rough implementation: `var prm = Sys.WebForms.PageRequestManager.getInstance(); function EndRequestHandler() {if ($get('<%= (TextBox)StatusWindow.FindControl("StatusTxtBox")).ClientID %>') != null) {$get('<%= ((TextBox)StatusWindow.FindControl("StatusTxtBox")).ClientID %>').scrollTop = $get('<%= ((TextBox)StatusWindow.FindControl("StatusTxtBox")).ClientID %>').scrollHeight;}} prm.add_endRequest(EndRequestHandler);` – midoriha_senpai Feb 14 '18 at 19:11

score 1 · Answer 2 · answered Sep 07 '09 at 09:21

Why dont you try this simple example:

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) {

            Page.ClientScript.RegisterStartupScript(this.GetType(),
            "ScrollTextbox",
            "<script type=\"text/javascript\">document.getElementById('" +
            this.TextBox1.ClientID +
            "').scrollTop = document.getElementById('" +
            this.TextBox1.ClientID +
            "').scrollHeight; " +
            " </script>");
        }
    }

Just change TextBox1 parameter with your text box name. You can see that the content in the text box is scrolled to bottom.

You can call this java script after AJAX is refreshing the content of your text box.

Jakob Gade · Answer 3 · 2009-09-07T09:10:34.100

0

Try some plain javascript. Here's a sample I think you can modify to work in your scenario:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>

  <script type="text/javascript">
    function scrollDown() 
    {
      document.getElementById('<%=TextBox1.ClientID%>').scrollTop = document.getElementById('<%=TextBox1.ClientID%>').scrollHeight;
    };
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  </form>
</body>
</html>

You just have to figure out how to call the scrollDown method...

edited Sep 07 '09 at 09:10

answered Sep 07 '09 at 08:22

Jakob Gade

12,319
15
70
118

this might be good for textarea HTML control, but how to add a javascript function to asp:TextBox server control? – ala Sep 07 '09 at 08:35

how to scroll asp.net textbox to bottom

3 Answers3

Linked