RadMenu in a table HTML

5 posts, 2 answers
  1. Sabrina
    Sabrina avatar
    30 posts
    Member since:
    Feb 2008

    Posted 27 Jan 2009 Link to this post

    Hi !

    I try to insert a radmenu in an html table.

    i set on the <td> align right, but the radmenu doesn't align at right.

    Somebody knows why ?

    Thanks,

    Sabrina

    Example :

    <table style="width: 772px" visible="false">                                  
                    <tr>                  
                        <td align="right">  
                            <telerik:RadMenu ID="RadMenu1" runat="server" EnableEmbeddedSkins="false">  
                                <Items> 
                                    <telerik:RadMenuItem Text="CashFlow">  
                                        <Items> 
                                            <telerik:RadMenuItem Text="toto" /> 
                                            <telerik:RadMenuItem Text="tata" /> 
                                        </Items> 
                                    </telerik:RadMenuItem> 
                                </Items> 
                            </telerik:RadMenu> 
                            <asp:Button CssClass="green_button" ID="Btn1" runat="server" Text="Btn 1" UseSubmitBehavior="false" /> 
                            <asp:Button CssClass="green_button" ID="Btn2" runat="server" Text="Btn 2" 
                                UseSubmitBehavior="false"/>                                                  
                        </td>                  
                    </tr> 
                </table> 
  2. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 28 Jan 2009 Link to this post

    Hi Sabrina,

    This is not a simple task as RadMenu renders as block element. Anyway, please find below a sample code snippet that shows the needed approach.

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
        * html div.RadMenu { display: inline !important } 
        *+html div.RadMenu { display: inline !important } 
         
        div.RadMenu 
        { 
            float: none !important; 
            display: inline-block !important; 
            vertical-align: middle !important; 
        } 
         
        * html div.RadMenu { display: inline !important } 
        *+html div.RadMenu { display: inline !important } 
         
        .green_button 
        { 
            vertical-align: middle !important; 
        } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
            <table style="width: 772px" visible="false"
                <tr> 
                    <td align="right"
                        <telerik:RadMenu ID="RadMenu1" runat="server"
                            <Items> 
                                <telerik:RadMenuItem Text="CashFlow"
                                    <Items> 
                                        <telerik:RadMenuItem Text="toto" /> 
                                        <telerik:RadMenuItem Text="tata" /> 
                                    </Items> 
                                </telerik:RadMenuItem> 
                            </Items> 
                        </telerik:RadMenu> 
                        <asp:Button CssClass="green_button" ID="Btn1" runat="server" Text="Btn 1" UseSubmitBehavior="false" /> 
                        <asp:Button CssClass="green_button" ID="Btn2" runat="server" Text="Btn 2" UseSubmitBehavior="false" /> 
                    </td> 
                </tr> 
            </table> 
        </form> 
    </body> 
    </html> 


    Kind regards,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Sabrina
    Sabrina avatar
    30 posts
    Member since:
    Feb 2008

    Posted 28 Jan 2009 Link to this post

    Hi Paul,

    Thanks for the reply,

    Now the alignment is correct. But the radmenu is in the principal page and when I open a radwindow (with no radmenu) the radmenu appears in the popup... (like there is not set in background) 

    Sabrina
  4. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 28 Jan 2009 Link to this post

    Hello Sabrina,

    Just set higher z-index to the RadWindowManager, i.e.

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title>Untitled Page</title> 
        <style type="text/css">  
        * html div.RadMenu { display: inline !important }  
        *+html div.RadMenu { display: inline !important }  
          
        div.RadMenu  
        {  
            float: none !important;  
            display: inline-block !important;  
            vertical-align: middle !important;  
        }  
          
        * html div.RadMenu { display: inline !important }  
        *+html div.RadMenu { display: inline !important }  
          
        .green_button  
        {  
            vertical-align: middle !important;  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
            <table style="width: 772px" visible="false"
                <tr> 
                    <td align="right"
                        <telerik:RadMenu ID="RadMenu1" runat="server"
                            <Items> 
                                <telerik:RadMenuItem Text="CashFlow"
                                    <Items> 
                                        <telerik:RadMenuItem Text="toto" /> 
                                        <telerik:RadMenuItem Text="tata" /> 
                                    </Items> 
                                </telerik:RadMenuItem> 
                            </Items> 
                        </telerik:RadMenu> 
                        <asp:Button CssClass="green_button" ID="Btn1" runat="server" Text="Btn 1" UseSubmitBehavior="false" /> 
                        <asp:Button CssClass="green_button" ID="Btn2" runat="server" Text="Btn 2" UseSubmitBehavior="false" /> 
                    </td> 
                </tr> 
            </table> 
            <telerik:RadWindowManager ID="Singleton" runat="server" Style="z-index: 10000"
                <Windows> 
                    <telerik:RadWindow OffsetElementID="OffsetElement" Title="Window Titlebar" VisibleTitlebar="true" EnableEmbeddedSkins="false" Top="20" Left="120" VisibleOnPageLoad="true" runat="server" Width="370" Height="250px" NavigateUrl="../../TestPage/Default.html" ID="Radwindow1"
                    </telerik:RadWindow> 
                </Windows> 
            </telerik:RadWindowManager> 
        </form> 
    </body> 
    </html> 
     

    For details on the matter please refer to this help article.

    Regards,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Sabrina
    Sabrina avatar
    30 posts
    Member since:
    Feb 2008

    Posted 29 Jan 2009 Link to this post

    Ok, thank you, it's absolutely what I want.

    Sabrina
Back to Top