Vuetify: buttons inside v-card-action unclickable

[JerryCBH]

Steps to reproduce

In a v-toolbar, create a v-menu with v-card and v-card-action containing one or two buttons. Apply CSS class to v-card with the style:
position: fixed !important;
v-card is now fixed at a position when menu clicked, However, buttons inside v-card-action can no longer be clicked. This seem to happen in Microsoft Edge and IE 11. Chrome and Firefox works ok.

Versions

v0.15.7, Microsoft Edge and IE 11.

What is expected ?

Ideally buttons clickable and functional after the absolute position style is applied.

What is actually happening ?

Buttons cannot be clicked.

Reproduction Link

https://codepen.io/anon/pen/NagbBq

[KaelWD]

Use content-class on the menu instead of giving the card a class directly. This is caused by a quirk in IE where a positioned element must overlap all its parents for clicks to register.

The blue rectangle below is the menu__content wrapper created by vuetify.

https://codepen.io/anon/pen/dVRNqy

[JerryCBH]

Thanks KaelWD, this works great!

Although for IE 11, I have an extra long menu even after setting left to: left: initial !important

[KaelWD]

TIL that IE doesn't support initial http://caniuse.com/#feat=css-initial-value

Does auto work instead?

[JerryCBH]

auto works, thanks!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord