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
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()">
We are still following your case.
Please do not hesitate to contact us if you have any additional questions regarding this matter.