0

When I put an icon on a menu item it makes the li tall but if you inspect the elements the li is the only thing that tall in the element.

Is this avoidable? if not, why?
Link to example: https://jsbin.com/kirekufoju/edit?html,output 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
       <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   </head>
   <body>

      <div>
         <ul id="e3ce4756-8352-40ab-b273-e87e253df37d" role="menu" tabindex="0" class="" aria-activedescendant="ui-id-18" >
            <li action="Change Theme" id="menuItem_1467148140" d>
               <nav id="ui-id-17" tabindex="-1" role="menuitem" class=""><span class="ui-icon ui-icon-disk "></span>Change Theme</nav>
            </li>
            <li action="Configure Dashboard" id="menuItem_772280342" >
               <nav id="ui-id-18" tabindex="-1" role="menuitem" class=""><span class=""></span>Configure Dashboard</nav>
            </li>
            <li action="Change Password" id="menuItem_145997753" >
               <nav id="ui-id-19" tabindex="-1" role="menuitem" class=""><span  class="ui-icon ui-icon-disk "></span>Change Password</nav>
            </li>
            <li  action="Help" id="menuItem_351754787" data-uri="">
               <nav id="ui-id-20" tabindex="-1" role="menuitem" class=""><span class=" "></span>Help</nav>
            </li>
            <li action="Logout" id="menuItem_1997186055" >
               <nav id="ui-id-21" tabindex="-1" role="menuitem" class=""><span class=" "></span>Logout</nav>
            </li>
         </ul>
      </div>
   </body>
  <script>
  $(document).ready(function(){

    $(document).ready(function(){
      $('ul').menu({

      })

    });
  });
  </script>
</html>
Austin_G
  • 177
  • 11
  • 1
    That isn't semantically correct. The `nav` should be a wrapper around the `ul`, *not a child* of each `li`. – random_user_name Sep 29 '17 at 15:58
  • I had tried with a div as the documentation just said "block level element" and the problem was there with that so I was just tooling around with other block level elements to see if there's a problem with just divs. I found an answer either way. – Austin_G Sep 29 '17 at 16:02

2 Answers2

2

Removing the list-style-image from your li should do the trick :

.ui-menu .ui-menu-item {
  list-style-image: none;
}

https://jsbin.com/mimeqebute/1/edit?html,output

soywod
  • 4,377
  • 3
  • 26
  • 47
0

Finaly found an open ticket for this. I've been looking but must have missed it. From: https://bugs.jqueryui.com/ticket/15214#no2

adding the following:

.ui-menu li.ui-menu-item{
    display:inherit;
}

to a stylesheet should cause it to behave normally. Apparently this was only happening on webkit browsers and possibly others.

Austin_G
  • 177
  • 11