RadTextBox MultiLine disable scroll and show all

8 posts, 0 answers
  1. Arsalan Ansari
    Arsalan Ansari avatar
    10 posts
    Member since:
    Jan 2010

    Posted 13 Oct 2010 Link to this post

    i have a radtextbox with TextMode="MultilLine".  i want to have a list of items in it but the problem is that in a radgrid, the textbox shrinks vertically and you have to use scroll bars to see all the content.

    i have tried...

    height="100%" on the textbox itself

    (another recommendation)

     

    OVERFLOW-X: visible; OVERFLOW-Y: visible; WORD-WRAP: break-word; HEIGHT: 100%;

     

     

     

    on the CSS Class of the textbox

    is there a quick and easy way to show all the vertical content and stretch the textbox to fix the vertical content?  if not in edit mode then at least in read-only mode?

    if i can achieve the effect with another control or htmlcontrol, what would you recommend?

     

     

     

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Oct 2010 Link to this post

    Hello Arsalan,

    Textboxes do not resize automatically, according to the amount of text in them. You can achieve the desired behavior with some Javascript.


    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <script runat="server">
     
        protected void Page_Load(object sender, EventArgs e)
        {
            RadTextBox1.Text = RadTextBox2.Text = @"line 1
    line 2
    line 3
    line 4
    line 5
    line 6
    line 7
    line 8";
        }
         
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <p>Will not resize:</p>
    <telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="MultiLine">
    </telerik:RadTextBox>
     
    <p>Will resize on initial load and after the value is changed:</p>
     
    <telerik:RadTextBox ID="RadTextBox2" runat="server" TextMode="MultiLine">
        <ClientEvents OnLoad="setHeight" OnValueChanged="setHeight" />
    </telerik:RadTextBox>
     
    <script type="text/javascript">
     
    function setHeight(sender, args)
    {
        window.setTimeout(function(){
            sender._textBoxElement.style.height = "";
            window.setTimeout(function(){
                sender._textBoxElement.style.height = sender._textBoxElement.scrollHeight + "px";
                sender._originalTextBoxCssText += "height: " + sender._textBoxElement.style.height + ";";
            }, 1);
        }, 1);
    }
     
    </script>
     
    </form>
    </body>
    </html>


    Best wishes,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. svs priyan
    svs priyan avatar
    5 posts
    Member since:
    Jul 2009

    Posted 07 Sep 2012 Link to this post

    Hi,

    it works as expected but i need this same functionality on KeyPress event..?

    Actually your suggestion was working after the value is changed (focus out) but i need to handle this on typing the text. I want to expand automatically while entering the text in the textbox.

    Can you help me to resolve this issue ?


    Thanks,
    Priyan
  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 12 Sep 2012 Link to this post

    Hi Priyan,

    You should attach the function setHeight on OnKeyPress event, eg.
    <telerik:RadTextBox runat="server" TextMode="MultiLine">
        <ClientEvents OnKeyPress="setHeight" OnLoad="setHeight"/>
    </telerik:RadTextBox>

    I hope this helps.

    All the best,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. svs priyan
    svs priyan avatar
    5 posts
    Member since:
    Jul 2009

    Posted 12 Sep 2012 Link to this post

    Hi,

    Thanks for your suggestion Galin and I have already tried this but it does not work out in IE8 browser. The problem is focus gone away after press the enter key to enter text in next line.

     Except IE8, Other browsers are support well but IE8 is core browser for my project. So can you plesae give me any other solution to resolve that browser issue.

    Thanks,
    Priyan
  7. Galin
    Admin
    Galin avatar
    526 posts

    Posted 17 Sep 2012 Link to this post

    Hi Priyan,

    I have tested again the scenario and it works as expected, even in older browsers as IE 8 and IE 7. For reference I am sending this video. Please check it out and let me know if there are any differences on your side.

    Regards,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. David
    David avatar
    6 posts
    Member since:
    Aug 2014

    Posted 22 Jan 2015 Link to this post

    This doesn't seem to work as expected if there is no vertical scrollbar. The scrollHeight property is just "0". I don't know how to enable a vertical scrollbar on the control either. Is there a setting which would do this?
  9. Galin
    Admin
    Galin avatar
    526 posts

    Posted 28 Jan 2015 Link to this post

    Hi David,

    I am afraid I am not able to identify what's causing the problem you are facing based on this information. I would appreciate it if you open a formal support ticket and provide more information. It will be great if you could isolate the problem in a simple running project so that I can examine it locally.

    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017