kendoMenu how to center menu if menu width is not known beforehand

Question

I have the following menu structure (Edited from original post):

<html class="k-webkit k-webkit40">
    <head>
        <title>Site Title</title>
            <!-- js and css files referenced here -->
    </head>
    <body>
        <link href="/PhalconEnhancedWebpages/public/ui/kendo/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
        <link href="/PhalconEnhancedWebpages/public/ui/kendo/styles/kendo.black.min.css" type="text/css" rel="stylesheet">
        <script src="/PhalconEnhancedWebpages/public/ui/kendo/js/jquery.min.js" type="text/javascript"></script>
        <script src="/PhalconEnhancedWebpages/public/ui/kendo/js/kendo.all.min.js" type="text/javascript"></script>

        <div id="divAll" class="AllContent">
            <div id="divHeaderAll">
                <div id="divHeaderContentAll" style="position:relative;width:100%;height:140px;background-color:#555555;">
                    <div id="divHeaderTop" style="position:absolute;left:0px;right:0px;top:0px;height:20px;background-color:#666666;text-align:center;">
                        This is the greeting bar
                    </div>
                    <div id="divHeaderMiddle" style="position:absolute;left:0px;right:0px;top:20px;height:100px;background-color:#777777;">
                        <div id="divCompanyLogo" style="position:absolute;left:0px;top:0px;width:180px;height:100px;">
                            Company<br/>Logo<br/>
                        </div>
                        <div id="divMenuHolder" style="position:absolute;left:180px;right:180px;top:0px;height:100px;text-align:middle;vertical-align:bottom;">
                            <div id="divMenuContentHolder">
                                <div id="menuContainer">
                                    <ul id="menuUL" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
                                        <li class="k-item k-state-default k-first" role="menuitem">
                                            <a href="/PhalconEnhancedWebpages/home/home" class="k-link">Home</a>
                                        </li>
                                        <li class="k-item k-state-default" role="menuitem">
                                            <a href="/PhalconEnhancedWebpages/map/map" class="k-link">Map</a>
                                        </li>
                                        <li class="k-item k-state-default" role="menuitem">
                                            <span class="k-link">
                                                Advanced
                                                <span class="k-icon k-i-arrow-s"></span>
                                            </span>
                                            <ul class="k-group" role="menu" aria-hidden="true">
                                                <li class="k-item k-state-default k-first" role="menuitem">
                                                    <span class="k-link">
                                                        Information
                                                        <span class="k-icon k-i-arrow-e"></span>
                                                    </span>
                                                    <ul class="k-group" role="menu" aria-hidden="true">
                                                        <li class="k-item k-state-default k-first" role="menuitem">
                                                            <a href="javascript:void(0)" onclick="redirectToRootSite('http://localhost:9191/src/html/Basic.html?folder=information&amp;page=device');" class="k-link">
                                                                Individual Devices
                                                            </a>
                                                        </li>
                                                        <li class="k-item k-state-default" role="menuitem">
                                                            <a href="javascript:void(0)" onclick="redirectToRootSite('http://localhost:9191/src/html/Basic.html?folder=information&amp;page=listen');" class="k-link">              Receive&nbsp;Site&nbsp;Assignments
                                                            </a>
                                                    </ul>
                                       ......... REST OF MENU OMITTED FOR BREVITY
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="divCustomerLogo" style="position:absolute;right:0px;width:180px;height:100px;">
                            Customer<br/>Logo<br/>
                        </div>
                    </div>
                    <div id="divHeaderBottom" style="position:absolute;left:0px;right:0px;bottom:0px;height:20px;background-color:#ff2211;text-align:center;">
                        This is the Alerts Bar
                    </div>
                </div>
            </div>
            <div id="divContentAll">
                <div id="divMainContent" style="width:100%;display:table;">
                ... THE REST IS NON HEADER/MENU RELATED CONTENT AND IS OMITTED FOR BREVITY
            </div>
        </div>
    </body>
</html>

Here is the javascript governing the "menuUL" element:

$(document).ready(function(){
   $("#menuUL").kendoMenu();
   // This is using the "black" theme, so the look and feel of the menu is derived from there.
});

And here are the css governing the "menuUL" element parents (some items are commented out throughout since I was playing with different permutations):

/*User Agent Stylesheet  (using google chrome in this case)*/
div{
    display:block;
}

.AllContent {
    font-family: Arial;
    color: white;
}

#divHeaderAll {
    width: 100%;
    height: 140px;
    background-color: #dddddd;
    position: absolute;
    top: 0px;
    left: 0px;
}


#divMenuContentHolder {
    margin: 0 auto;
    /* position: relative; */
    top: 14px;
    min-width: 800px;
    background-color: #3D3D3D;
}


#menuContainer {
    margin: 10px auto;
    padding-top: 0px;
    width: 800px;
}

UL related styles are controlled by the usage of the "kendoMenu" function (kendo.all.min.js -- Kendo UI Complete v2013.3.1324 free version) and the "black" theme (kendo.black.min.css)

This results in a menu area stretching from left to right of "divMenuContentHolder", even though the actual menu items only take up a fraction of that width as shown in the graphic below:

undesirable result

What needs to be done so that the menu area only takes up the width of its items and its centered within menuConainer and divMenuContentHolder as shown in the image below?

desired result

Any suggestions?

EDIT: There is also a parent named "divMenuHolder" that has some inline styles set upon it. I have edited my code below to reflect that.

EDIT2: Added all the pertinent HTML and CSS.

Balaji Viswanath · Accepted Answer · 2015-01-24T00:18:05.353

The reasons why your menu dint work were,

The width of the menu was set as 800px in the CSS. So that must be removed.
The default display property of is block. Hence it will always take 100% width. So #menuUL must be set to "inline-block" so that it only takes the width of existing content.
The parent pf #menuUL must be center aligned using "text-align:center" so that the menu is in the middle.

$(document).ready(function(){
   $("#menu").kendoMenu();
   // This is using the "black" theme, so the look and feel of the menu is derived from there.
});

#menu-wrapper {
    text-align: center;
}

#menu {
    display: inline-block;
    text-align: left;
}

<html class="k-webkit k-webkit40">
    <head>
        <title>Site Title</title>
        <link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
        <link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.black.min.css" type="text/css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="menu-wrapper">
        <ul id="menu">
            <li>
                Products
                <ul>
                    <li>
                        Furniture
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Tables & Chairs</li>
                            <li>Sofas</li>
                            <li>Occasional Furniture</li>
                            <li>Children's Furniture</li>
                            <li>Beds</li>
                        </ul>
                    </li>
                    <li>
                        Decor
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Bed Linen</li>
                            <li>Throws</li>
                            <li>Curtains & Blinds</li>
                            <li>Rugs</li>
                            <li>Carpets</li>
                        </ul>
                    </li>
                    <li>
                        Storage
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Wall Shelving</li>
                            <li>Kids Storage</li>
                            <li>Baskets</li>
                            <li>Multimedia Storage</li>
                            <li>Floor Shelving</li>
                            <li>Toilet Roll Holders</li>
                            <li>Storage Jars</li>
                            <li>Drawers</li>
                            <li>Boxes</li>
                        </ul>
                    </li>
                    <li>
                        Lights
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Ceiling</li>
                            <li>Table</li>
                            <li>Floor</li>
                            <li>Shades</li>
                            <li>Wall Lights</li>
                            <li>Spotlights</li>
                            <li>Push Light</li>
                            <li>String Lights</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                Stores
                <ul>
                    <li>
                        <div id="template" style="padding: 10px;">
                            <h2>Around the Globe</h2>
                            <ol>
                                <li>United States</li>
                                <li>Europe</li>
                                <li>Canada</li>
                                <li>Australia</li>
                            </ol>
                            <img src="../content/web/menu/map.png" alt="Stores Around the Globe" />
                            <button class="k-button">See full list</button>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                Blog
            </li>
            <li>
                Company
            </li>
            <li>
                Events
            </li>
        </ul>
        </div>
    </body>
</html>

Unfortunately, that just shifted the whole menu to the left. The dark gray bar behind it still remains stretched from left to right, However, the full size of the menu did shrink to only the with of its items (yay). I did make an edit to my original post to display the parent of "divMenuContentHolder" just in case that it may be affecting the menu. — fuzzlog, Jan 22 '15 at 23:42
if you could provide more info about what you're doing here and respond to what the OP is saying about this not working, it would make this a better answer — markasoftware, Jan 23 '15 at 00:47
just to add more info, adding "width:800px" to #menuContainer put the menu in the center, but added the extra unnecessary width. Removing that width and adding "display:inline-block; text-align:center;" to #menuContainer gets rid of the unwanted width, but shifts the menu to the left of its parent, and does nothing to remove the dark gray background. — fuzzlog, Jan 23 '15 at 02:18
Can u post your complete code or give us a link to your dev site so that we can help u better — Balaji Viswanath, Jan 23 '15 at 11:54
Just re-edited the code to show all the applicable HTML and CSS — fuzzlog, Jan 23 '15 at 17:24
Run the code snippet.. This is what I was able to achieve with the code that u have provided me.. Unless u provide the full css, i wouldn't be able to provide a proper answer for u. — Balaji Viswanath, Jan 23 '15 at 21:33
The code snippet runs exactly like mine does when I remove the 800px from the #menuContainer element (ie, the menu itself shifts to the left). Since I cannot provide all code due to the proprietary nature of it, not sure what else I can provide. What I've provided so far, is all the html and css that is pertinent to my current situation. — fuzzlog, Jan 23 '15 at 23:29
Updated the code with some dummy ul tag.. Is this how you want to center the menu? — Balaji Viswanath, Jan 23 '15 at 23:54
That works perfectly, thanks. Now, if you don't mind, can you explain why this trick works where as all the combinations I had did not? I'm marking this as the answer. — fuzzlog, Jan 24 '15 at 00:10

kendoMenu how to center menu if menu width is not known beforehand

1 Answers1