0

Hey guys is there an example (with css overrides if need be) of how to have a a menu with two columns?

I am trying to do the following: 

<span id="menu-lower-left" class="select-category"><span>Select a category</span></span>
      <ul class="category-list mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
          for="menu-lower-left">
        <li class="mdl-menu__item">Some Action</li>
        <li class="mdl-menu__item">Another Action</li>
        <li class="mdl-menu__item">Additional Action</li>
        <li class="mdl-menu__item">Yet Another Action</li>
      </ul>

CSS looks like: `

  .category-list {
    list-style-type: disc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
  }

` When I try simply add 2 columns, it works but my list items disappear!

enter image description here

Any idea why this is happening? Here is a Plunker that demonstrates the issue:

http://plnkr.co/edit/d9nNB7jg4W8nsGzdlnC4

Alex Daro
  • 439
  • 1
  • 7
  • 17

1 Answers1

1

It would seem that there is a bug in Chrome where transitions and transforms can make things disappear in multi-column layouts. Using the trick from this answer fixes it. Here is an updated Plunker: http://plnkr.co/edit/st2RmkNbcJqTVaQG3Fna?p=preview I only needed to add one thing to your CSS

  .mdl-menu__item {
    transform: translateZ(0);
  }
Community
  • 1
  • 1
BurningLights
  • 2,387
  • 1
  • 15
  • 22