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
Uwe Richter
710
Websplitter panes 50-50 after resize
posted

Hi,

is it possible to resize the the splitter panes so that the size of each is 50%. Or - with other word - the splitter bar is right in the middle.

This will be great!.

Thx

Uwe

  • 24497
    Suggested Answer
    posted

    Hi Uwe,

    If you are asking about initial size of splitter with 2 panes, then size of 50% is default. In case of more panes, default initial sizes of panes are proportional. For example, in case of 4 panes, each of them will have 20%.

    You also may set initial size explicitly to any desired vaue (% or px). In case of 2 panes, you may set specific size of any of them. The size of the other pane will be adjusted automatically.

    <ig:WebSplitter ID="WebSplitter1" runat="server" Height="300px" Width="90%">
          <Panes>
             <ig:SplitterPane runat="server" Size="50%"><Template>...</Template></ig:SplitterPane>
       ...

    Though, you should keep in mind that % size is not supported at run time, but only on initial load/rendering. In order to support permanent dynamic % sizes of panes, application should process browser events (like onresize) which affect size of splitter and adjust sizes of panes manually. It is not possible to build such functionality as a built-in feature, because instant sizes of panes depend on various conditions like multiple panes, collapse/expand actions, resizing panes by end user, etc.

    If panes are not movable by end user and application needs to keep permanent % ratio, then it can do following:
    <script type="text/javascript">
          function onLoad() {
            window.onresize = function () {
               var splitter = $find('WebSplitter1');
               var pane = splitter.get_panes()[0];
               var width = splitter.get_element().offsetWidth;
               pane.set_size(width / 2);
          }
      }
    </script>
    <body onload="onLoad()">

    If application needs to maintain % ratio including last position modified by end user, then it should besides codes above, process change events of bar-position and save last ratio. Below is example:

    <script type="text/javascript">
          function WebSplitter1_SplitterBarPositionChanged(sender, eventArgs) {
            var pane0_size = sender.getPaneAt(0).get_size(), pane1_size = sender.getPaneAt(1).get_size();
            sender._lastRatio = pane0_size / (pane0_size + pane1_size);
       }
       function onLoad() {
            window.onresize = function () {
              var splitter = $find('WebSplitter1');
              var pane = splitter.get_panes()[0];
              var width = splitter.get_element().offsetWidth;
              var ratio = splitter._lastRatio || 0.5;
              pane.set_size(width * ratio);
          }
      }
    </script>
    <body onload="onLoad()">