Hey.. I got an easy one for yall..
I am using the resizablecontrolextender for a panel control. I want the client to have the ablility to resize the height of the box but NOT the width.
This works in Firefox, but not in IE 7 .. anyone got an idea? NO WIDTH!!
"ResizableControlExtender1" runat="server" TargetControlID="thePanel" MinimumWidth="-1" MaximumWidth="-1" MaximumHeight="400" MinimumHeight="100" HandleCssClass="handle" ResizableCssClass="onresize" HandleOffsetX="-300" >
Set MaximumWidth=MinimumWidth=200px (or whatever).
David Anson:
Set MaximumWidth=MinimumWidth=200px (or whatever).
Thatdoes work, but I want my resizable panel inside a div that expandshorizontally (liquid) with the window. The Control itself can beexpanded by the browser window size. An example would be like howoutlook separates emails (in a grid) above, and email details below.You can change the vertical size of the two boxes, but not make themsmaller than the window.
Essentially, I need the equivalent of minimumwidth="100%"
Since I really really want to figure this out I am providing an example to see if I can explain this problem better.
Here is a simple code example to illustrate:
<body>
<form id="form1" runat="server">
<style type="text/css">
.handle { background:Black; width:20px; height:20px; }
</style>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="topDiv" runat="server" style="background:Blue; height:100px; display:block; width:100%;">
Content is in here.
</div
<div id="bottomDiv" runat="server" style="background:Red; height:200px;">
Some more content in here as well.
</div
<ajaxToolkit:ResizableControlExtender ID="extender" runat="server"
TargetControlID="topDiv"
HandleCssClass="handle"
MinimumHeight="100"
MaximumHeight="500">
</ajaxToolkit:ResizableControlExtender>
</form>
</body>
NOTICE: Both Divs expand to the size of the browser window. I just want to be able to resize the top Div without the ability to change the width. Ideas? Help!
Since apparently this wasn't so easy I had to figure out a solution for myself. I thought I'd share:
<style type="text/css"> .topRow { overflow:hidden; display:block; background-color:#e6e6de; border:solid 1px black; } .innerTopRow { position:relative; top:0; left:0; right:0; bottom:0; height:93%; overflow:auto; } div.bottomRow { position:fixed; top:0px; bottom:0px; right:20px; left:212px; background:Green; overflow:auto; border:solid 1px black; } .handleTop { width:2000px; height:5px; background:#e6e6de; border-top:solid 1px black; border-bottom:solid 1px black; overflow:hidden; cursor:n-resize; } </style> <asp:ScriptManager ID="ScriptManager" runat="server" /> <asp:Panel id="topRowPanel" runat="server" CssClass="topRow"> <div class="innerTopRow"> <asp:ContentPlaceHolder ID="topRowContent" runat="server"></asp:ContentPlaceHolder> </div> </asp:Panel> <div ID="bottomRowPanel" class="bottomRow"> <asp:ContentPlaceHolder ID="bottomRowContent" runat="server"></asp:ContentPlaceHolder> </div> <script type="text/javascript"> function OnClientResizeText(sender, eventArgs) { var e = sender.get_element(); e.style.width = ''; $get("bottomRowPanel").style.top = e.clientHeight + 105; } </script> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender" runat="server" TargetControlID="topRowPanel" HandleCssClass="handleTop" MinimumHeight="130" MinimumWidth="2000" MaximumWidth="2000" MaximumHeight="500" OnClientResizing="OnClientResizeText" HandleOffsetX="-1" />
