is it possible to hide the spliter bar if the pane is locked, not allowed to collapse and resize?
Hello eable;
It is possible to set hidden property of splitterbar in CSS class based on the splitter pane as shown below:
Code that sets CSS class for SplitterBar:
foreach (SplitterPane pan in this.WebSplitter1.Panes){if (pan.Locked == true){this.WebSplitter1.SplitterBar.CssClass = "hide";}}
Styles on the page:
<style type="text/css">
.hide{visibility:hidden;}
</style>
Hope this helps.
Hi Bhadresh,
It can hide the spliter bar with your css style, but a white space area remains on the page, is it possible to remove this too?
Thank you!
Hello,
I am just following up to see if you were able to hide splitter bar based on the information I have provided above.
I was able to see the behavior you described using the markup you have provided. I would suggest you to set “thicknesscssclass” of the splitter bar as shown below:
<ig:WebSplitter ID="splitter" runat="server" Height="300px" Width="100%"><SplitterBar thicknesscssclass="hide" ></SplitterBar><panes><ig:SplitterPane runat="server" Locked="True" MaxSize="150px" MinSize="150px"Size="150px"><Template><div id="left">left</div></Template></ig:SplitterPane><ig:SplitterPane runat="server"><Template><div id="right">right</div></Template></ig:SplitterPane></panes></ig:WebSplitter>
Thicknesscssclass gets sets CSS class which defines the width/height of splitter bar. Review the link below for more details on this:
<http://help.infragistics.com/NetAdvantage/ASPNET/2011.2/CLR4.0/?page=Infragistics4.Web.v11.2~Infragistics.Web.UI.LayoutControls.SplitterBar~ThicknessCssClass.html>
In this class set the width more than 0px as shown below:
.hide{visibility: hidden;width:1px ;}
The reason why width needs to be set more than 0px because Source code of the control is written such a way that if width of the splitter bar is set to 0 pixel or less than 0 pixel it automatically sets width to 6 pixel. Below lines will explain that logic from source code:
if(bar <= 0)/* if thickness is not defined, then use 6px */fixBar = (bar = 6) + 'px';
I hope this helps.
Here is my example, left panel is yellow and right panel is red, there is a white space between them after hiding the splitter bar.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> body { background-color: Black; margin: 0; padding: 0; } .hide { visibility: hidden; } #left { background-color: Yellow; height: 100%; } #right { background-color: Red; height: 100%; } </style> </head> <body> <form id="form1" runat="server"> <div> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <ig:WebSplitter ID="splitter" runat="server" Height="300px" Width="100%"> <SplitterBar CssClass="hide"> </SplitterBar> <panes> <ig:SplitterPane runat="server" Locked="True" MaxSize="150px" MinSize="150px" Size="150px"> <Template> <div id="left">left</div> </Template> </ig:SplitterPane> <ig:SplitterPane runat="server"> <Template> <div id="right">right</div> </Template> </ig:SplitterPane> </panes> </ig:WebSplitter> </div> </form> </body> </html>
I was not able to see white space on the splitter bar using below markup and code:
Page Markup:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="200px" Width="300px"><Panes><ig:SplitterPane runat="server" Locked="True"><Template><asp:Calendar ID="Calendar1" runat="server"></asp:Calendar></Template></ig:SplitterPane><ig:SplitterPane runat="server"><Template><asp:Button ID="Button1" runat="server" Text="Button" /></Template></ig:SplitterPane></Panes></ig:WebSplitter>
Code Behind:
StyleSet Used:
I am not certain about the white space area you mentioned. In order to look in to this, could you provide me with more details on Markup of page, styles and behavior you are getting.
I am also having this problem. I followed the instructions in your http://forums.infragistics.com/aspnet/media/p/310651.aspx article, and indeed, it does hide the splitter bars, but it retains a whitespace equivalent to the sum of the width of all splitter bars at the end, which appears on top of other content. When you are trying to fill 100% of the width/height then this looks very ugly.
I thought perhaps I could use the height style property, and pumping this up to 50px certainly demonstrates the issue, but setting it to 0px makes no difference. :(