Spacing and Width

6 posts, 0 answers
  1. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 21 Oct 2011 Link to this post

    Hello,

    I would like to have the Menu spaced out evenly based on the width of the browser window. If the user changes the browser window, the items get closer together. Much like a basic DIV containing multiple divs centered with an auto width. I've tried implementing a similiar approach with the menu, but have not found a solution that works. Could you please give me some suggestions. I'm working with a custom skin that I pulled from telerik. The only modifications to the skin is the border width. I now need to modify the skin to evenly space out the menu items on the browser window.

    Example (menu items evenly spaced based on browser window width)
    _______________________________________________________
    Home          About          Contact Us          Help         Logout        |  
    __________________________________________________
    Home About Contact Us Help Logout          |
    __________________________________________________
    Home About Contact Us Help Logout       |

    ** The spacing width should float and be evenly spaced out on the top of the browser window.

    Thanks,
    Nathan
  2.
  3. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 26 Oct 2011 Link to this post

    Hi Nathan,

    One way you can achieve that is to set with of the menu and its items in percentage (in the example below I set 20% width to the items since they are only 5, so depending on the number of the menu items you can determine their width). For instance:
    <style type="text/css">
            .rmSized ul.rmHorizontal li.rmItem,
     .rmSized .rmRootGroup .rmVertical li.rmItem
            {
                width: 20%;
            }
        </style>
     
    markup:
    <telerik:RadMenu ID="MainMenu" runat="server" Width="100%">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Home">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="News">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Self-Service">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Finished Goods">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Volunteers">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Teams">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Projects">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Admin">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 01 Mar 2012 Link to this post

    This works great when using IE7, but when we went to IE8 there were problems. I have the width set to 10% since 20% was a little too much. In IE 8 the menu dropdown displays transparent (except the left area of the dropdown area).

    Any suggestions for using this with IE 8?

    ** I'm using the standard skin settings, but with the following addition:
    .rmSized ul.rmHorizontal li.rmItem,
    .rmSized .rmRootGroup .rmVertical li.rmItem
    {
        width: 10%;
    }


    Thanks!!
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Mar 2012 Link to this post

    Hi Nathan,

    Try using the following css class selector instead of the previously suggested one:
    .rmSized ul.rmHorizontal li.rmItem
    {   width: 10%;  }

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 06 Mar 2012 Link to this post

    Great, it works! However, the root menu item "On Hover" extends over the line (just by a small amount). Any ideas?

    Example:
    * When I hover over "Root Item 2", the highlighted cell extends over into the next menu item (Root Item 3 in example below).

    Root Item          |          Root Item 2          |          Root Item 3          |          Root Item 4
                             |----------------------------------|


    Thanks!!
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 09 Mar 2012 Link to this post

    Hi Nathan,

    I  tested the scenario that you describe but I can not get the appearance that you do. On hover of the menu item the hover effect applies as expected.

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top