The functionality I am trying to obtain here is that when my ImageButton is clicked, I'd like my RadTextBox's height to be resized by a few more lines. I've attempted this using this Count function in javascript, however, when it gets called - the height is not changed, the RadTextBox is only moved 2000px to the bottom of the panel. I am wondering if there is an easier way to accomplish this?
<style type="text/css"> |
#expandButton |
{ |
position: absolute; |
top: 20px; |
right: 5px; |
} |
</style> |
<script type="text/javascript"> |
function clearText(field) { |
if (field.defaultValue == field.value) field.value = ''; |
else if (field.value == '') fieldfieldfield.value = field.defaultValue; |
} |
function Count() { |
var text = document.getElementById('<%=txtUserNote.ClientID%>'); |
text.style.height = "2000px"; |
} |
</script> |
<body bgcolor="#F4F4F4" runat="server" id="MainBody"> |
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%"> |
<asp:Literal ID="notesHeader" runat="server"> |
</asp:Literal> |
<telerik:RadTextBox ID="txtUserNote" runat="server" TextMode="MultiLine" Width="99%" |
Height="15px" Visible="False" Value="Click to Enter New Note" Font-Size="10px" OnFocus= |
"clearText(this)"> |
</telerik:RadTextBox> |
<div id="expandButton"> |
<asp:ImageButton runat="server" ID="expandTbButton" ImageUrl="images/expand.gif" OnClientClick="Count(); return false;"/> |
</div> |
</telerik:RadAjaxPanel> |
</body> |