Mdb-ui-kit: Multilevel dropdown menu

[Nicks182]

We are looking at implementing Material design for our site. We already use bootstrap so this has worked well so far and was easy to get going.

However, we have a need for multilevel dropdown menus. We have been using a plugin (See link below) and I was kinda hoping it would just keep working, but is doesn't.

Link: http://vsn4ik.github.io/bootstrap-submenu/

Don't mind ditching the plugin, but is there another way I can do this with Bootstrap-Material??

Regards
Nick

[irontiga]

Bootstrap material doesn't really change the dropdowns....It should still work with the standard bootstrap code, but not with dropdown.js

[Nicks182]

Moved on to something else for a few hours, but just spent some time working through any and all css being applied and found there is an overflow:hidden from the Material css being applied that is making the submenu not showing. For now I'm just overriding it with css and will handle it better later, but at first it looked broken and my first thought was to find out if Bootstrap-material doesn't already have a way to do it.

It actually works perfectly and could potentially be a nice add on for this... maybe?

[Nicks182]

On second thought, it only works with default bootstrap dropdown... so maybe not a good ad on. I now have to find a way to use this plugin with default bootstrap while getting the dropdowns styled properly.

[bardtian]

it seems not working with bootstrap material.

[bardtian]

Sorry, it works:)

[rosskevin]

If you would like to request something, please reopen and submit a CodePen test case.

[hashvg7]

hello Team,

Ive been trying to use the below bootply code to integrate it with material, but the multilevel menu fails, if i remove the material.min.css file, then it works like a charm.
http://www.bootply.com/6FC76YQ4Nh

can you kindly guide me thru the same please

[nhkphp]

Try, open file bootstrap-material-design.css, find .dropdown-menu li, remove overflow: hidden;, enjoy :D

[debonil]

@nhkphp
overflow: hidden is missing in bootstrap-material-design.min.css.
how to change it in minified version?(except chenging main file and then minifying it).

[FezVrasta]

never edit compiled files, always edit the source codes (overriding them possibly) and compile them again.

We are not in 2000's anymore.

[debonil]

Thanks @FezVrasta for your kind guidance.
My problem has been solved by adding css

<style> .dropdown-menu li { overflow: visible; }</style>

Is it good practice?

[FezVrasta]

it's much better than editing the compiled file