+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / SiteMenu justify

SiteMenu justify

6 posts, 1 answered
  1. Scott Rozman
    Scott Rozman avatar
    93 posts
    Registered:
    10 Oct 2012
    19 Apr 2010
    Link to this post
    I've been having problems with my SiteMenu looking good on both PC and Mac. The best way seems to be able to justify the text.
    I've found this post on KB for the RadMenu, but can't see how I'd apply this to the Sitefinity SiteMenu control.
    http://www.telerik.com/support/kb/aspnet-ajax/menu/how-to-stretch-the-menu-items-to-fill-the-entire-width-of-the-menu.aspx
    Is there any built-in Sitefinity support for this formatting issue that I've overlooked? If not, what is my next best option?
    I was adjusting padding to get things to fill the space nicely, but on Mac the font displays wider and then my menu wraps to two lines.

    thanks in advance.
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    20 Apr 2010
    Link to this post
    Hi Scott Rozman,

    Thank you for contacting Telerik Support.

    The SiteMenu control is a RadMenu for ASP.NET AJAX bound to a SiteMapDataSource. This is wrapped in a user control and added to the Sitefinity toolbox. That said you can find the source of the control in ~/Sitefinity/UserControls/Navigation35/SiteMenu.ascx and apply the suggestions from the KB article you have found.

    If you have more questions, please feel free to contact us.

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
    Answered
  3. Scott Rozman
    Scott Rozman avatar
    93 posts
    Registered:
    10 Oct 2012
    20 Apr 2010
    Link to this post
    The above example works for making each of the menu items the same length.
    Since I have words of various sizes, i.e. News, Partnerships, etc.
    I went after adjusting the padding to fill the remaining space that wasn't occupied by text.
    This solution uses "changecss" javascript function found here:
    http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
    as well as a modification to the javascript provided by Telerik at
    http://www.telerik.com/support/kb/aspnet-ajax/menu/how-to-stretch-the-menu-items-to-fill-the-entire-width-of-the-menu.aspx
    <script type="text/javascript">
        function changecss(theClass, element, value) {
            //Last Updated on June 23, 2009
            //documentation for this script at
            var cssRules;
     
            var added = false;
            for (var S = 0; S < document.styleSheets.length; S++) {
     
                if (document.styleSheets[S]['rules']) {
                    cssRules = 'rules';
                } else if (document.styleSheets[S]['cssRules']) {
                    cssRules = 'cssRules';
                } else {
                    //no rules found... browser unknown
                }
     
                for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
                    if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
                        if (document.styleSheets[S][cssRules][R].style[element]) {
                            document.styleSheets[S][cssRules][R].style[element] = value;
                            added = true;
                            break;
                        }
                    }
                }
                if (!added) {
                    if (document.styleSheets[S].insertRule) {
                        document.styleSheets[S].insertRule(theClass + ' { ' + element + ': ' + value + '; }', document.styleSheets[S][cssRules].length);
                    } else if (document.styleSheets[S].addRule) {
                        document.styleSheets[S].addRule(theClass, element + ': ' + value + ';');
                    }
                }
            }
        }
     
      function pageLoad ()   
      {   
        var menu = $find("<%= RadMenu1.ClientID %>");   
        var width = menu.get_element().offsetWidth;   
        var totalTextLength = 0;
        var idealPadding = 0;
        var idealPaddingString = "";
       // 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 ++)   
        {     
           totalTextLength = totalTextLength + menu.get_items().getItem(i).get_element().offsetWidth;
        }
        idealPadding = (width - totalTextLength) / i / 2;
        idealPaddingString = String(idealPadding) + "px";
        changecss(".RadMenu .rmHorizontal .rmText", "padding-left", idealPaddingString);
        changecss(".RadMenu .rmHorizontal .rmText", "padding-right", idealPaddingString);
       }   
       window.onresize = pageLoad;   
    </script>



  4. Scott Rozman
    Scott Rozman avatar
    93 posts
    Registered:
    10 Oct 2012
    22 Apr 2010
    Link to this post
    After realizing that the above changecss javascript function was adding my css padding rule to every style sheet, I've modified it to only add the rule to the last sheet in the array.

    function changecss(theClass, element, value) {
            //Last Updated on June 23, 2009
            //documentation for this script at
            //Modified by Scott Rozman to only add rule to last sheet, so rule only added one time
            var cssRules;
            var added = false;
            var S = document.styleSheets.length - 1;
            if (document.styleSheets[S]['rules']) {
                cssRules = 'rules';
            } else if (document.styleSheets[S]['cssRules']) {
                cssRules = 'cssRules';
            } else {
                //no rules found... browser unknown
            }
     
            for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
                if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
                    if (document.styleSheets[S][cssRules][R].style[element]) {
                        document.styleSheets[S][cssRules][R].style[element] = value;
                        added = true;
                        break;
                    }
                }
            }
            if (!added) {
                if (document.styleSheets[S].insertRule) {
                    document.styleSheets[S].insertRule(theClass + ' { ' + element + ': ' + value + '; }', document.styleSheets[S][cssRules].length);
                } else if (document.styleSheets[S].addRule) {
                document.styleSheets[S].addRule(theClass, element + ': ' + value + ';');
                }
            }
             
        }

    Additionally, I am going to experiment with eliminating the window.onresize = pageLoad;
    It gave some pretty funky effects and since my menu is set to a specific pixel width, I don't see resizing the window would have any effect on how it should display.
  5. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    28 Sep 2010
    Link to this post
    I have menu items that will need different widths... well actually different padding on left and right to make it fit across the navigation bar.
    Basically if the code could adjust the left right padding value (15px) so that when there are a different number of  menu items (depending on the role of the user who is logged in) all will fit across the horizontal navigation bar (1000px wide)

    .RadMenu .rmHorizontal .rmLink {
    padding:10px 15px;
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 Sep 2010
    Link to this post
    Hi Laura,

    What you have to do here is to subscribe to the DataBound event of the RadMenu. This event executes right after the menu has been populated and you will be to get the number of menu items on the top level. Then manually set the padding style for menu items on the top level.

    Greetings,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
6 posts, 1 answered