How Remove Default White Background and Make Transparent?

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 25 Nov 2008 Link to this post

    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 -->


  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 26 Nov 2008 Link to this post

    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.
Back to Top