This is a migrated thread and some comments may be shown as answers.

[Solved] Hide tab using CSS

2 Answers 182 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Helen asked on 01 Apr 2014, 03:08 PM

extraspace.png

Hi,

I have a single sliding pane setup horizontally that is used like a quick search window. Is it possible to hide the tab when the user docks the pane using CSS?
I'm doing something like this in my CSS, please tell me what I'm missing...

<style type="text/css">

.paneTabContainerExpandedHorizontal, rspSlidePane

{

/*visibility:hidden !important;*/

display:none !important;

}

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

</style>

This is my html code:

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" ></telerik:RadScriptManager>

<script type="text/javascript">

function PaneDockedHandler(sender, eventArgs) {

var slidingZone = $find("<%= SpeedSearchSlidingZone.ClientID %>");

var pane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());

if (pane) {

pane.hideTab();

}

</script>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" width="100%" Height="100%">

<telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="None" >

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Height="100%">

<telerik:RadSlidingPane ID="LeadSearchSlidePane" Title="Search Criteria" runat="server" width="150px">

<uc1:LeadSearchCriteria runat="server" ID="LeadSearchCriteria" />

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="TreeListSlidePane" Title="Tree View" runat="server">

<uc2:LeadSearchTreeView runat="server" ID="LeadSearchTreeView" />

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="1px" Width="1px" />

<telerik:RadPane ID="RightPane" runat="server" >

<telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal" Width="100%" Height="100%">

<telerik:RadPane ID="SpeedSearchPane" runat="server" Scrolling="None" Height="22px">

<telerik:RadSlidingZone ID="SpeedSearchSlidingZone" runat="server" Height="22px">

<telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server"

OnClientDocked="PaneDockedHandler" >

speed lead content

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadPane ID="LeadResultPane" runat="server" Scrolling="None">

content

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

As you can see, I'm also trying to hide the tab using javascript by following this example here:

http://www.telerik.com/forums/hiding-tab-when-only-one-sliding-pane-and-docked

it hides the tab but leaves an empty space. If I use OnClientBeforeDock or OnClientDocking, slidingZone.get_dockedPaneId() returns null and wouldn't go to the hideTab statement. I have attached a screen shot of the tab layouts.

Please tell me if it's possible to do this using CSS? If not, is there a way to get ride of the empty space besides messing with the width and height as done in the example above?

Thank you for your help~

Helen

2 Answers, 1 is accepted

answered on 03 Apr 2014, 01:32 PM

Hi Helen,

The sender of the ClientDocked and ClientUndocked events is the RadPane which is about to be docked, so you do not need to get a reference to it through the sliding zone. You can access it directly in the following way:

<telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server" OnClientDocked="PaneDockedHandler" OnClientUndocked="PaneUndockedHandler">

speed lead content

</telerik:RadSlidingPane>

<script type="text/javascript">

function PaneDockedHandler(pane, eventArgs) {

pane.hideTab();

}

function PaneUndockedHandler(pane, eventArgs) {

pane.showTab();

}

</script>

On a side note, the funcionality of the hideTab() method is only to hide the current tab, but not its container so if there are other tabs they would remain visible. If you would like to hide/show also the wrapping tabs container, this could be achieved in a similar way:

<telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server"

OnClientDocking="PaneDockedHandler" OnClientUndocking="PaneUndockedHandler">

speed lead content

</telerik:RadSlidingPane>

<script type="text/javascript">

function PaneDockingHandler(pane, eventArgs) {

pane.getTabContainer().parentNode.style.display = "none";

}

function PaneUndockingHandler(pane, eventArgs) {

pane.getTabContainer().parentNode.style.display = "block";

}

</script>

I hope this helps.

Regards,
Vessy
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.