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

[Solved] RadMenu in a table HTML

4 Answers 230 Views

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

Sabrina asked on 27 Jan 2009, 02:30 PM

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>

4 Answers, 1 is accepted

Accepted

answered on 28 Jan 2009, 11:32 AM

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.

Accepted

answered on 28 Jan 2009, 02:02 PM

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.