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

Spacing and Width

5 Answers 89 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 2
Nathan asked on 21 Oct 2011, 04:57 PM
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

5 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 26 Oct 2011, 01:54 PM
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
0
Nathan
Top achievements
Rank 2
answered on 01 Mar 2012, 11:26 PM
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!!
0
Kate
Telerik team
answered on 06 Mar 2012, 03:14 PM
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.
0
Nathan
Top achievements
Rank 2
answered on 06 Mar 2012, 03:57 PM
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!!
0
Kate
Telerik team
answered on 09 Mar 2012, 03:44 PM
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.
Tags
Menu
Asked by
Nathan
Top achievements
Rank 2
Answers by
Kate
Telerik team
Nathan
Top achievements
Rank 2
Share this question
or