How can I align the kendoMenu in the center when the menu width is unpredictable?

Presenting a modified menu structure:

<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 area displays a warm welcome message
                    </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 Logo
                        </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>
                                       ......... ADDITIONAL MENU ITEMS NOT SHOWN FOR BREVITY
                                       </ul>
                                </div>
                            </div>
                        </div>
                        <div id="divCustomerLogo" style="position:absolute;right:0px;width:180px;height:100px;">
                            Customer Logo
                        </div>
                    </div>
                    <div id="divHeaderBottom" style="position:absolute;left:0px;right:0px;bottom:0px;height:20px;background-color:#ff2211;text-align:center;">
                        Alert notifications will display here
                    </div>
                </div>
            </div>
            <div id="divContentAll">
                <div id="divMainContent" style="width:100%;display:table;">
                 ... REMAINING NON HEADER/MENU CONTENT OMITTED
                        
            </div>
        </div>
    </body>
</html>

The javascript controlling the "menuUL" element:

$(document).ready(function(){
   $("#menuUL").kendoMenu();
   // The menu appearance is based on the "black" theme.
});

CSS regulating the parents of the "menuUL" element (some styles are commented out for experimentation):

/*Default User Agent Stylesheet (viewed in Google Chrome)*/
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;
}

The styling of UL elements is managed by the "kendoMenu" function from kendo.all.min.js and the "black" theme (kendo.black.min.css)

The menu extends across the entire width of "divMenuContentHolder," even though the actual menu items only occupy a portion as depicted below:

How can the menu area be constrained to the width of its items, centered within "menuConainer" and "divMenuContentHolder" as shown in the image below?

Any recommendations?

EDIT: Additionally, there is a parent element named "divMenuHolder" with inline styles applied. I have updated the code below to reflect this.

EDIT2: All relevant HTML and CSS details have been included.

Answer №1

Here are the reasons why your menu did not work:

  1. The menu width was defined as 800px in the CSS, which needs to be removed.

  2. The default display property of #menuUL is block, causing it to take up 100% width. To fix this, set #menuUL to "inline-block" so it only takes the width of existing content.

  3. The parent of #menuUL should be center aligned using "text-align:center" for the menu to appear in the middle.

$(document).ready(function(){
   $("#menu").kendoMenu();
   // This theme uses the "black" theme for the menu's look and feel.
});
#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered issue with Ajax post request without any additional details provided

I could really use some assistance with this issue. It's strange, as Chrome doesn't seem to have the same problem - only Firefox does. Whenever I submit the form, Ajax creates tasks without any issues. My MySQL queries are running smoothly and I& ...

Bootstrap does not display unordered lists (<ul>) or ordered lists (<ol>)

I'm having trouble with my code that should display ordered and unordered lists. Even though I am using Bootstrap, I can't seem to get any list styling - no numbers or bullets are showing up. <ul> <li>test1</li> <li>test2 ...

What is the best way to optimize Bootstrap 5 grids for mobile responsiveness?

Within my portfolio, I have a projects section that switches between having the description on the left with an image on the right and vice versa. Despite my efforts to make it responsive, I'm struggling to figure out how to ensure the image appears a ...

Adjusting the size of an image based on the size of the window

I'm currently working on my first website project. I have successfully implemented a large image banner, however, I am facing an issue with setting its height. Whenever I try to adjust the height using percentage values, the banner disappears. My goal ...

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

Error message consistently pops up when using the jQuery search feature

My jQuery function is fetching data from a different domain, and I want to use AJAX to display that data when the user enters a value into the search box. However, no matter if I search by .productName or .itemCode, the app always gives me an error messa ...

Strange circle border appearance in Android / Chrome device

Having an issue with my code on a Samsung Galaxy S5 in Chrome 54.0.2840.85, Android 6.01. You can view the problematic codepen here: http://codepen.io/johnsonjpj/pen/jVpreB The border displays correctly on Firefox and iPhones, but not on my device. Trou ...

Ways to incorporate the setTimeOut function

<body> <script> $(window).scroll(function() { $('#csgo').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scroll ...

AngularJs - Show the response only upon verifying the correct answer

Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...

css: Aligning fonts horizontally when they have varying sizes

First time asking a question on this platform! I'm attempting to achieve a "pixel perfect" horizontal alignment of two lines of text, with each line having a different font size. <style type="text/css"> * { font-family: sans-serif;} ...

What is the best way to position a tooltip near an element for optimal visibility?

One div is located on the page as follows: <div id="tip"> Text for tip goes here... </div> And another one can be found below: <div class="element"> Text for element goes here... </div> There is also a piece of JavaScript ...

Transforming Google Maps from using jQuery to AngularJS

If I have a Jquery google map with find address and routing system, my goal is to convert it to an angular google map with more options. The current Jquery google map code looks like this: var directionsDisplay = new google.maps.DirectionsRenderer({ d ...

Exploring PHP sessions across main and subdomains

Is it possible to pass sessions from one domain to another using Ajax in PHP? This is the index.html in domain.com domain.com index.html -> jQuery $.post($url,$form.serialize(),function(e){console.log(e)}); This is the index.php in sub.domain.com sub ...

choosing from dropdown menu items

Learn HTML <table> <tr> <td>ENTER PRINCIPLE AMOUNT</td> <td><input type="text" name="principle" size="7"></td> </tr> <tr> <td>ENTER RATE OF INTEREST</td> <td><input type="text" na ...

Tips for assigning unique names to each radio input groupNeed to assign unique names to radio

Currently, I am seeking a dynamic solution to alter the name associated with a set of radio input buttons. The situation involves creating a travel itinerary where users can choose between "domestic" and "international." Based on this selection, the corre ...

What is the best way to transfer a "require" object to Jade in Node.js?

I have developed a node module that includes a simple JavaScript file. My goal is to utilize this JavaScript function within my jade file. In music.js, I am importing the "myplayer" module: var keystone = require('keystone'); exports = module.ex ...

What is the best method for validating a div element using Angular UI Bootstrap?

When I try to display an array of objects in a view, my issue arises when I place a div element inside the li and ul tags. The challenge now is to validate elements such as "number", "url", and "email" on blur and keyup events. Some elements may be require ...

verify that the div has finished loading with ajax

I am working on a project where I have a div with the id #pageToLoad. This div loads a form from formPage.php. I want to ensure that the page is fully loaded in the div so that if any errors occur, I can reset the form using: $("#form").reset(); Can some ...

The dropdown div does not activate when the image is clicked

When the image in the simple dropdown is clicked, it fails to activate the dropdown feature. This issue was encountered while working on a Shopify project, making it challenging to troubleshoot. To demonstrate the problem, I have re-created the scenario i ...

Utilizing AJAX to upload a file and managing it through a Java servlet on the server side

I've been struggling with this particular issue for the past few days and haven't found any helpful resources elsewhere. I'm attempting to upload a file through an HTML form that includes other input fields: var formData = new FormData() ...