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

center menu items

4 Answers 87 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Amanda
Top achievements
Rank 2
Amanda asked on 15 Jul 2009, 04:38 PM
I have a rad menu that I want to fill the entire width of the table/div it is in.  This isn't a problem, setting with to 100% or specific pixels.  What I want to do is to have the menu items spread out throughout the entire width of the whole menu. Basically I want the items to be justified (not the text, just the items). 

4 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 16 Jul 2009, 06:27 AM
Hi Amanda,

Please refer to this forum post for details on the matter.

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Amanda
Top achievements
Rank 2
answered on 16 Jul 2009, 01:13 PM
Okay, so this is only part of what I need.  The whole main Rad Menu is centered, yes, which is really good.  But each individual menu item is not justified in the main part of the menu.  When I change the text of each menu item to test{1}, all the items are still on the left side of the main menu.  I need them to spread out across the whole main menu.

0
Peter
Telerik team
answered on 17 Jul 2009, 03:08 PM
Hello Amanda,

Please, try the following:
<script type="text/javascript">       
  function pageLoad ()       
  {       
    var menu = $find("<%= RadMenu1.ClientID %>");       
    var width = menu.get_element().offsetWidth;  
    var singleItemLength = Math.floor(width / menu.get_items().get_count()) - 1 + "px";  
    var singleSpanLength = Math.floor(width / menu.get_items().get_count()) - 23 + "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;  
       var span = menu.get_items().getItem(i).get_textElement()  
       span.style.width = singleSpanLength;  
     }       
   }       
   window.onresize = pageLoad;       
</script>     


Kind regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Amanda
Top achievements
Rank 2
answered on 17 Jul 2009, 08:26 PM
Thank you so much!  That's exactly what I needed.  The only thing I needed to do to make my javascript not error was take out the runat="server" in the head tag.  For some reason, that made everything error out.  But it works now and I appreciate the help!  Thanks again!
Tags
Menu
Asked by
Amanda
Top achievements
Rank 2
Answers by
Paul
Telerik team
Amanda
Top achievements
Rank 2
Peter
Telerik team
Share this question
or