Css Style Radmenu

4 posts, 0 answers
  1. Kevin
    Kevin avatar
    265 posts
    Member since:
    Jun 2011

    Posted 22 Jan 2015 Link to this post

    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>
  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 23 Jan 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    265 posts
    Member since:
    Jun 2011

    Posted 23 Jan 2015 in reply to Ivan Danchev Link to this post

    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>
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 26 Jan 2015 Link to this post

    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.

     
Back to Top