I'd like to resize a WebSplitter in javascript... in particular, I'd like to change the height. (For the whole WebSplitter, not a specific pane within.)
How would I do this? If it matters I am currently using 2011 Vol1, although I hope the solution is the same when we switch to 2012 Vol1. If there are no clientside properties/methods exposed for this (and I don't notice any), an answer with or without jQuery calls would be fine.
Say the Websplitter is something simple like the following and I want to change the height to 200px or 600px based on a clientside event:
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="400px" Width="100%" BorderStyle="None" BorderWidth="0px"> <Panes> <ig:SplitterPane runat="server" BackColor="Lavender" MinSize="120px"> <Template> <h2>Left Side</h2> </Template> </ig:SplitterPane> <ig:SplitterPane runat="server" BackColor="AliceBlue"> <Template> <h2>Right Side</h2> </Template> </ig:SplitterPane> </Panes> </ig:WebSplitter>
I'd appreciate any help with this.
Hello tinajanis,
You can try the following function on button click for example:
function resizeSplitter() { var splitter = $find("WebSplitter1"); splitter.get_element().style.height = "300px"; }
function resizeSplitter() {
var splitter = $find("WebSplitter1");
splitter.get_element().style.height = "300px";
}
<input type="button" name="name" value="Resize" onclick="resizeSplitter()" />
I hope that this approach will work in your scenario.
Thanks. That worked with one addition. I had to add the following line after setting the height so that the actual panes and bar resized accordingly:
web_splitter1.layout(); //needed to update the contents of the splitter