RadMenu appears behind nested splitter

4 posts, 1 answers
  1. Matthew
    Matthew avatar
    51 posts
    Member since:
    Nov 2007

    Posted 04 May 2008 Link to this post

    I have a nested splitter set up using the following code:

    1 <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="WebBlue" Orientation="Horizontal" Height="100%" Width="100%"
    2             <telerik:RadPane ID="TopPane" runat="server" Height="75px" Scrolling="none"
    3                 <div id="Header"
    4                     <uc1:Header ID="Header1" runat="server" />                             
    5                 </div>   
    6             </telerik:RadPane> 
    7             <telerik:RadPane ID="BottomPane" runat="server" Scrolling="none"
    8                 <telerik:RadSplitter ID="RadSplitter2" Skin="WebBlue" Orientation="Vertical"  
    9                     runat="server" LiveResize="true"
    10                     <telerik:RadPane ID="LeftPane" runat="server" Width="300px" MinWidth="200" MaxWidth="800"
    11                         <div id="NavTree"
    12                             <asp:ContentPlaceHolder ID="ContentLeft" runat="server"
    13                             </asp:ContentPlaceHolder> 
    14                         </div> 
    15                     </telerik:RadPane> 
    16                     <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
    17                     <telerik:RadPane ID="MainPane" runat="server"
    18                         <div id="OuterContentArea"
    19                             <asp:contentplaceholder id="ContentMain" runat="server"
    20                             </asp:contentplaceholder>              
    21                         </div>  
    22                     </telerik:RadPane> 
    23                 </telerik:RadSplitter>             
    24             </telerik:RadPane> 
    25         </telerik:RadSplitter> 

    In my header, I have a RadMenu control.  The problem is that the menus items drop down behind the "BottomPane" RadPane.  I've tried changing the z-order using CSS on the RadMenu control and the menu item that drops down, but that doesn't work.  Please advise.

    Thanks,
    Matt
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 05 May 2008 Link to this post

    Hi Matt,

    Please, review the KB on Using RadSplitter and RadMenu together.


    Best wishes,
    Peter
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Matthew
    Matthew avatar
    51 posts
    Member since:
    Nov 2007

    Posted 06 May 2008 Link to this post

    Hi,

    The KB article has a solutions that almost works.  I used the approach where I set the position of the RadMenu to absolute and the the .ApplyOverflow class to "RadPane1" and that works ONLY if I don't have the menu right aligned.  I need to have the menu right-aligned with the following code (the code suggestion from Telerik):

    <div style="float:right;">
    [RadMenu]
    </div>

    What do I need to do in order to get both features?

    Thanks,
    Matt
  4. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 12 May 2008 Link to this post

    Hi Matt,

    Please find attached an aspx page that provides a solution to your problem. The issue was caused because the floating of the RadMenu and its absolute positioning are conflicting styles; the proper way to align it that way is to use absolute positioning and set the "right" CSS property.

    Greetings,
    Alex
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top