javascript - Material Design Lite Example of two column menu - not working in Chrome -


hey guys there example (with css overrides if need be) of how have a menu 2 columns?

i trying following: 

<span id="menu-lower-left" class="select-category"><span>select 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 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 try add 2 columns, works list items disappear!

enter image description here

any idea why happening? here plunker demonstrates issue:

http://plnkr.co/edit/d9nnb7jg4w8nsgzdlnc4

it seem there bug in chrome transitions , transforms can make things disappear in multi-column layouts. using trick this answer fixes it. here updated plunker: http://plnkr.co/edit/st2rmknbcjqtvaqg3fna?p=preview needed add 1 thing css

  .mdl-menu__item {     transform: translatez(0);   }

Comments

Post a Comment