Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadTextBox MultiLine disable scroll and show all

7 Answers 561 Views
Input
This is a migrated thread and some comments may be shown as answers.
Arsalan Ansari
Top achievements
Rank 1
Arsalan Ansari asked on 14 Oct 2010, 02:17 AM

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?

 

 

 

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Oct 2010, 10:18 AM
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
0
svs priyan
Top achievements
Rank 1
answered on 07 Sep 2012, 07:28 AM
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
0
Galin
Telerik team
answered on 12 Sep 2012, 11:58 AM
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.
0
svs priyan
Top achievements
Rank 1
answered on 12 Sep 2012, 01:25 PM
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
0
Galin
Telerik team
answered on 17 Sep 2012, 11:42 AM
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.
0
Bill
Top achievements
Rank 1
answered on 22 Jan 2015, 09:44 PM
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?
0
Galin
Telerik team
answered on 28 Jan 2015, 09:51 AM
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.

 
Tags
Input
Asked by
Arsalan Ansari
Top achievements
Rank 1
Answers by
Dimo
Telerik team
svs priyan
Top achievements
Rank 1
Galin
Telerik team
Bill
Top achievements
Rank 1
Share this question
or