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

RadMenu in a table HTML

4 Answers 162 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Sabrina
Top achievements
Rank 1
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

Sort by
0
Accepted
Paul
Telerik team
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.
0
Sabrina
Top achievements
Rank 1
answered on 28 Jan 2009, 01:32 PM
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
0
Accepted
Paul
Telerik team
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.
0
Sabrina
Top achievements
Rank 1
answered on 29 Jan 2009, 10:28 AM
Ok, thank you, it's absolutely what I want.

Sabrina
Tags
Menu
Asked by
Sabrina
Top achievements
Rank 1
Answers by
Paul
Telerik team
Sabrina
Top achievements
Rank 1
Share this question
or