I cannot get the ResizableControlExtender to work on a textbox multiline.
any help.........
I have also tried to put the text box in a panel & resize the panel. Only the panel resizes not the textbox
Hi U2envy1,
There's a wonderful sample contained in Ajax Control Toolkit. Here is the code section.
<asp:Panel ID="PanelText" runat="server" CssClass="frameText">
This text resizes itself to be as large as possible within its container.
</asp:Panel>
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender2" runat="server"
TargetControlID="PanelText"
ResizableCssClass="resizingText"
HandleCssClass="handleText"
MinimumWidth="100"
MinimumHeight="50"
MaximumWidth="400"
MaximumHeight="150"
OnClientResize="OnClientResizeText" />
function OnClientResizeText(sender, eventArgs) {
// This sample code isn't very efficient, but demonstrates the idea well enough
var e = sender.get_element();
// Make the font bigger until it's too big
while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) {
e.style.fontSize = (fontSize++)+'pt';
}
var lastScrollWidth = -1;
var lastScrollHeight = -1;
// Make the font smaller until it's not too big - or the last change had no effect
// (for Opera where e.clientWidth and e.scrollWidth don't behave correctly)
while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) &&
((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) {
lastScrollWidth = e.scrollWidth;
lastScrollHeight = e.scrollHeight;
e.style.fontSize = (fontSize--)+'pt';
}
}
There's a little difference to what your want.You can use $get("<%=Your TextBox.ClientID%>").style.width= value to change its width property.
For more details , please dip into the source code.
Best regards,
Jonathan
Thanks much appreciated.
How do I do this ?
You can use $get("<%=Your TextBox.ClientID%>").style.width= value to change its width property.
Hi U3envy1,
I have found another solution which is better than the former. It will change the TextBox's width sostenuto while the former solution only changes its width after the resize operation. In this solution, we attached a Javascript function to the ResizableControlExtender's add_resizing event. The function will resize the TextBox according to the Panel's width.
Here is the whole sample which you can copy into your project.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <style> .handleText { width:16px; height:16px; background-image:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; } .resizingText { padding:0px; border-style:solid; border-width:2px; border-color:#7391BA; } .frameText { width:100px; height:100px; overflow:auto; float:left; background-color:#ffffff; border-style:solid; border-width:2px; border-color:Gray; font-family:Helvetica; line-height:normal; } </style> </head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" CssClass="frameText"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </asp:Panel> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" BehaviorID="MyRCEBID" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="100" MinimumHeight="50" MaximumWidth="400" MaximumHeight="150" /> <script type="text/javascript" language="javascript"> var widht;function pageLoad(){ $find('MyRCEBID').add_resizing(onResizing); } function onResizing(){ width = $find('MyRCEBID').get_element().style.width; width = width.substring(0,width.length-2); width = width -10; width = width +'px'; $get("<%=TextBox1.ClientID%>").style.width = width; } </script> </form></body></html> I really hope this help. Please pay special attention to the "Bold" Part.
Best regards,
Jonathan
Thanks much appreciated. I will try it soon. Just have so much to do at the moment. thanks again.
I had a chance to play with it. Its just what I wanted. Thanks its working beautifully.
How do I get the Textbox height to grow with the panel control?
Hi U2envy1,
$get("<%=TextBox1.ClientID%>").style.height = $find('MyRCEBID').get_element().style.height; Please have a try. By the way, you should modify the height property just like what we did on the width property.
Best regards,
Jonathan
Thanks once again.
One more thing about this. How do I get the font size to increase and decrease accordingly.
Hi U2envy1,
$get("<%=TextBox1.ClientID%>").style.fontSize = a certain value. Now , you should write your own arithmetic to work out value.
Best regards,
Jonathan
Hi,
I've done this and it works fine, except when I put it in a user control. When I do this, and use the resizable textbox more than once on the same page it gives me the error "Error: Sys.InvalidOperationException: Two components with the same id 'MyRCEBID' can't be added to the application".
So basically do I just need to change the "behaviorid" and the bit of javascript that references it to be something dynamically named? And if so, how might I go about this?
My code basically mirrors 'Jonathan Shen's' post
Hi Jonathan, I found code to work out the arithmetic value. how do I add this to the code you have provided already.
var fontSize = 12;
function OnClientResizeText(sender, eventArgs) {
// This sample code isn't very efficient, but demonstrates the idea well enough
var e = sender.get_element();
// Make the font bigger until it's too big
while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) {e.style.fontSize = (fontSize++)+'pt';
}
var lastScrollWidth = -1;
var lastScrollHeight = -1;
// Make the font smaller until it's not too big - or the last change had no effect
// (for Opera where e.clientWidth and e.scrollWidth don't behave correctly)
while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) &&
((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) {
lastScrollWidth = e.scrollWidth;
lastScrollHeight = e.scrollHeight;
e.style.fontSize = (fontSize--)+'pt';
}
Hi U2envy1,
I think you can add arithmetic code insideonResizing(){},sender.get_element() equal to $find('MyRCEBID').get_element(), you can replace it.
Hope this help.
Best regards,
Jonathan
I am lost when it comes to Java Script.
This is what I have so far. Any help on this. My font goes very small on resize thou. How do I increment it ?
var fontSize = 12;
function onResizing(){
width = $find('MyRCEBID').get_element().style.width;
width = width.substring(0,width.length-2);
width = width -10;
width = width +'px';height = $find('MyRCEBID').get_element().style.height;
height = height.substring(0,height.length-2);
height = height -10;
height = height +'px';
$get("<%=TextBox1.ClientID%>").style.width = width;
$get("<%=TextBox1.ClientID%>").style.height = height;
fontSize = $find('MyRCEBID').get_element().style.fontSize;fontSize = (fontSize++)+'pt';
$get("<%=TextBox1.ClientID%>").style.fontSize = fontSize;
}
Hi U2envy,
Here is the sample that I have expanded the reset text function.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <style> .handleText { width:16px; height:16px; background-image:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; } .resizingText { padding:0px; border-style:solid; border-width:2px; border-color:#7391BA; } .frameText { width:100px; height:100px; overflow:auto; float:left; background-color:#ffffff; border-style:solid; border-width:2px; border-color:Gray; font-family:Helvetica; line-height:normal; } </style> </head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" CssClass="frameText"> <asp:TextBox ID="TextBox1" runat="server" value="hello"></asp:TextBox> </asp:Panel> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" BehaviorID="MyRCEBID" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="100" MinimumHeight="50" MaximumWidth="400" MaximumHeight="150" /> <script type="text/javascript" language="javascript"> var widht; function pageLoad(){ $find('MyRCEBID').add_resizing(onResizing); } var fontSize = 12; function onResizing(){ width = $find('MyRCEBID').get_element().style.width; width = width.substring(0,width.length-2); width = width -10; width = width +'px'; $get("<%=TextBox1.ClientID%>").style.width = width; $get("<%=TextBox1.ClientID%>").style.height = $find('MyRCEBID').get_element().style.height; e = $get("<%=TextBox1.ClientID%>"); // Make the font bigger until it's too big while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) { e.style.fontSize = (fontSize++)+'pt'; } var lastScrollWidth = -1; var lastScrollHeight = -1; // Make the font smaller until it's not too big - or the last change had no effect // (for Opera where e.clientWidth and e.scrollWidth don't behave correctly) while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) && ((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) { lastScrollWidth = e.scrollWidth; lastScrollHeight = e.scrollHeight; e.style.fontSize = (fontSize--)+'pt'; } }form></body></html> fontSize = $find('MyRCEBID').get_element().style.fontSize get the Panel's fontSize instead of the TextBox's.
I hope this help.
Best regards,
Jonathan
Thanks much appreciated. I wish to add this code to every app I build. Ill comment it with inspired by Jonathan.
Thanks again...... !!!
David Anson:
rmaiya:
