Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
k
20
WebResizingExtender horizontal orientation
posted

Hi

I would like to use the WebResizingExtender as a horizontal splitter as against the default vertical. I cant find any properties that will make it work horizontally. Below is my code that creates a vertical splitter while what I need is a horizontal one. I was expecting it to have a property something like Orientation="Horizontal" but there s none. Many Thanks for your help!

<

 

igtk:WebResizingExtender HandleImage="./Images/splitbar.jpg" HandleClass="Gripper" ID="WebResizingExtender31" runat="server" TargetControlID="Navigation" TargetHtmlElementID="Navigation" MaximumHeight="1000" MinimumHeight="1000" MinimumWidth="0" MaximumWidth="1000" />

  • 24497
    posted

    Hi Keyurshahit,

    The WebResizingExtender was not designed as a splitter, but as a resizer for rectangle area like dialog. If you need a splitter, then I suggest you to use WebSplitter control.

    You also may configure WebResizingExtender to appear as a horizontal splitter, but if application needs to split 2 panes, then behavior on "linked" pane may have some problems. Application may in addition to process resizing events and adjust/synchronize size of "linked" area, but that is beyound features of WebResizingExtender.

    I experimented with faking horizontal splitter. It seemed to work as expected, within limits which I mentioned. Below is a sample which you may copy to aspx and test.

    <style type="text/css">
     .vertHandle{border: 1px solid blue;width:398px;height:5px;background:yellow;cursor:n-resize;}
    </style>
    <div style="overflow:hidden; height:510px; width:400px; background:cyan; border:1px solid black;">
     <div id="Navigation" runat="server" style="border:1px solid red; overflow:auto; background:orange;">
      Some content<br /><br /><input /><br /><br />Some content
     </div>
     Some content in linked area<br /><br /><input />
    </div>
    <ig:WebResizingExtender HandleClass="vertHandle" ID="WebResizingExtender1" runat="server" TargetControlID="Navigation" MaximumHeight="500" MinimumHeight="10" MinimumWidth="400" MaximumWidth="400"></ig:WebResizingExtender>