Css Style Radmenu

[Kevin]

Trying to css the radmenu so that the menu items are split evenly across 100% of my screen.  I have a radmenu with 8 items but when I set the radmenu to 100% of the div, it goes 100% but the menu items do not split evently across it.  I tried putting a width of the menu items themsleves but they never get 100% of the screen and when I minimize the screen they wrap intead of minimizing with the screen.  Is there a way to do this or are we stuck with trying to get pixal widths to work.  Seems like this should be a standard feature in the control.

<table style="width:100%">
           <tr>
               <td style="text-align:center"><telerik:RadMenu ID="rdmenu" runat="server" OnItemClick="rdmenu_ItemClick" Width="100%"></telerik:RadMenu></td>
           </tr>
       </table>
       <div style="width:100%">
           <telerik:RadTileList runat="server" ID="RadTileList1" SelectionMode="Multiple" OnSelectionChanged="RadTileList1_SelectionChanged" AutoPostBack="true" Skin="WebBlue" OnTileClick="RadTileList1_TileClick"></telerik:RadTileList>
           <asp:HiddenField ID="HFMenuId" runat="server"/>
       </div>

[Ivan Danchev]

Hello,

Please find the following suggested way of making the RadMenu items spread evenly and filling the entire width of the control.

Regards,
Ivan Danchev
Telerik

 

 

[Kevin]

Hi Ivan,

Ok thats what I though was going to happen and it works for me.  But heres what it does, we cannot override the CSS style to align the menus to the middle and make the whole thing clickable and up the font of the menu.  As soon as we put in the javscript, it no longer likes our css except for setting the width of the menu.

html .RadMenu {
            font-size: 20px !important;
            text-align:center !important;
            width:100%
        }

        .rmRootLink {
            text-align: center;
            font-size:30px;
        }


 <telerik:RadCodeBlock ID="rdCodeBlock" runat="server">
        <script type="text/javascript">
            function pageLoad() {
                  var menu = $find("<%= rdmenu.ClientID %>");
                  var width = menu.get_element().offsetWidth;
                  var singleItemLength = Math.floor(width / menu.get_items().get_count()) - 1 + "px";


                  // due to incorrect rounding;
                  // You may need to subtract a larger number depending on
                  // the skin that you are using.
                  for (var i = 0; i < menu.get_items().get_count() ; i++) {
                      var li = menu.get_items().getItem(i).get_element();
                      li.style.width = singleItemLength;
                  }
              }
              window.onresize = pageLoad;
        </script>
    </telerik:RadCodeBlock>


 <table style="width:100%">
                <tr>
                    <td><telerik:RadMenu ID="rdmenu" runat="server" OnItemClick="rdmenu_ItemClick" CssClass="RadMenu"></telerik:RadMenu></td>
                </tr>
            </table>

[Ivan Danchev]

Hello,

A better way to make RadMenu items spread evenly,  to center their text and have the clickable area cover their whole width, without using js, is to a set the RenderMode property to Lightweight and apply the following css styles:

<style type="text/css">
    div.RadMenu_Justified .rmRootGroup {
        width: 100%;
        box-sizing: border-box;
        display: table;
        table-layout: fixed;
        border-collapse: collapse;
    }
        div.RadMenu_Justified .rmRootGroup > .rmItem {
            display: table-cell;
            float: none;
        }
        div.RadMenu_Justified .rmRootGroup:after {
            display: none;
        }
        div.RadMenu_Justified .rmRootLink {
            text-align: center;
        }
</style>

Here's the RadMenu declaration and the set RenderMode and CssClass properties:

<table style="width: 100%">
    <tr>
        <td>
            <telerik:RadMenu ID="rdmenu" runat="server" RenderMode="Lightweight" CssClass="RadMenu_Justified" ClickToOpen="true" >
                <Items>
                    <telerik:RadMenuItem Text="Item1">
                        <Items>
                            <telerik:RadMenuItem Text="Child Item1"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Child Item2"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item2" ></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </td>
    </tr>
</table>

Regards,
Ivan Danchev
Telerik