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

How Remove Default White Background and Make Transparent?

1 Answer 356 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Kevin asked on 25 Nov 2008, 06:27 PM
I have a master page with a div.  Inside that div I have a RadSplitter with 2 panes.  The left pane has a treeview asp control in it and the right pane has a contentplaceholder in it.  Also in the div I have just some test text in a p tag outside the RadSplitter.  The div tag is css driven for background image and color info that shows up fine when the treeview and the contentplaceholder controls do NOT appear inside a RadSplitter.

However when they are placed in a RadSplitter, all content inside the RadSplitter shows up with a white background instead of the appropriate css background/color stuff as defined by the div tag (both panes).  The test text in the p tag works correctly so I know it's just the RadSplitter itself.

I've tried the background="transparent" on the RadSplitter and various sub-elements but no go.

What's the trick I'm missing?!


Edited: Here's the code I'm using:


<div id="fullColumn">



<telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%" Width="100%" ResizeMode="EndPane">



<telerik:RadPane id="Radpane1" runat="server" width="22" scrolling="None" minwidth="22" Height="475">



<telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22" clicktoopen="true">



<telerik:RadSlidingPane id="Treeview" title="Treeview" runat="server" width="190" Height="475">



<asp:TreeView ID="NavigationTreeView" runat="server" ExpandDepth="2" DataSourceID="ApplicationSiteMap" />












<telerik:RadSplitBar id="Radsplitbar3" runat="server" collapsemode="Forward" />



<telerik:RadPane id="Radpane2" runat="server" BackColor="Transparent" >



<div id="breadcrumb">



<asp:SiteMapPath ID="DefaultBreadCrumb" SiteMapProvider="DefaultSiteMapProvider" runat="server" />






<asp:ContentPlaceHolder ID="DefaultContent" runat="server" />












</div><!-- end fullColumn -->


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 26 Nov 2008, 09:16 AM
Hello Kevin,
Please add the following CSS classes to the HEAD of your page:
/* RadPane content */ 
.RadSplitter_Default td.pane,   
.RadSplitter_Default td.paneHorizontal,  
/* RadSlidingZone content */ 
.RadSplitter_Default table.slideZone,  
/* RadSlidingPane content. */ 
/* Please note that in case the content of a sliding pane is transparent, the content of the RadPane, over which the sliding pane */ 
/* slides, will be visible over the sliding pane */ 
.RadSplitter_Default div.slideContent,   
.RadSplitter_Default div.slideContentDocked  

All the best,
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Asked by
Top achievements
Rank 2
Answers by
Telerik team
Share this question