Material-design-lite: z-index of menu in cards

[shenzhuxi]

I tried to change the z-index value of menu__container and mdl-card, but can't fixed it. Did I miss anything?

[Garbee]

If you're modifying the components and having problems, that is up to you to find support for. We can only address problems with the core implementation. Try asking for help on StackOverflow and use the material-design-lite tag along with any other appropriate tags.

[shenzhuxi]

Don't you think the menu should be on top of other components by default?

[Garbee]

Please share a codepen or jsfiddle that reproduces the problem then.

Sorry, from the way your post was worded it sounded like you were just changing the z-index for some reason and it was then not working.

[surma]

@shenzhuxi I can only guess what’s going wrong here, but the highest z-index won’t help if the container has overflow: hidden, which is the case for cards. Take a look at our text-only template, where we have menus inside cards.

[shenzhuxi]

@Garbee Sorry for my description.
@surma Thanks. What's the reason for using overflow: hidden with cards?

[Garbee]

Overflow is hidden with cards since if anything expands beyond the containers boundaries we don't want it overflowing and causing glitchy layouts/bad looking UX. The content of a card should fit within the view of the cards and this keeps scrolling within a card from happening (or overflow being visible which is worse.)

So this is a case where the menu should go upwards into the card. Looks like using one of the top modifiers would fix the problem. Assuming the menu isn't large enough to overflow the top of the container.

[surma]

@shenzhuxi Also, rounded corners. The container has the _obligatory_ border-radius: 2px so the layers inside get cropped appropriately.
However, I totally acknowledge the issue you are running into. For now, I’d say have the menu open up to the top rather then to the bottom (have the card be self-contained).

[Garbee]

Looking at the menu spec there is no clear guidance as to how menus in this case should be handled.

I'd suspect that MD would not like the menu overflowing the containers contents in any direction. However I could be wrong. All the examples show menus being used as a part of the primary application's container which means it has all the space it could need.

Marking as something we need some guidance on to understand if this is a core issue or not.

[zinkkrysty]

Why not implement the menu as a separate element on the page (direct child of the body tag) and not as a sibling of the element that triggered the menu (button)? It would require removing and appending the dom somewhere else upon opening but that is a simple operation in JS. I have been using qTip2 in my projects for quite some time and I find its way of handling overflowing and overlapping content quite well implemented.

[Garbee]

In lieu of getting MD Guidance beforehand, with V2 we will remove the hidden overflow. I'm not seeing any cases where content causes a direct problem here. So if developers are experiencing an issue they can add the overflow themselves.

However, we still urge that menus shouldn't overflow. If it is on the bottom of the container, have the menu open upwards so it has space in the container to operate.

[sgomes]

Cards will be reimplemented in #4472 and menus in #4508. Not feasible to fix until then.

[XpeedMan]

For this people, like me, that have the same problem, you can solve this issue using some CSS code:

.mdl-card, .mdl-card__supporting-text {
    overflow: inherit;
}