center menu items

5 posts, 0 answers
  1. Amanda
    Amanda avatar
    173 posts
    Member since:
    Sep 2007

    Posted 15 Jul 2009 Link to this post

    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). 
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 16 Jul 2009 Link to this post

    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.
  3. Amanda
    Amanda avatar
    173 posts
    Member since:
    Sep 2007

    Posted 16 Jul 2009 Link to this post

    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.

  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 17 Jul 2009 Link to this post

    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.
  5. Amanda
    Amanda avatar
    173 posts
    Member since:
    Sep 2007

    Posted 17 Jul 2009 Link to this post

    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!
Back to Top