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

Css Style Radmenu

3 Answers 336 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 22 Jan 2015, 05:03 PM
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>

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 23 Jan 2015, 07:33 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Kevin
Top achievements
Rank 1
answered on 23 Jan 2015, 04:00 PM
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>
0
Ivan Danchev
Telerik team
answered on 26 Jan 2015, 03:07 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Menu
Asked by
Kevin
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or