vuematerial/vue-material

MdAutocomplete results list not visible when used on MdDialog

blackdwarf opened this issue · 1 comments

blackdwarf commented

Steps to reproduce

  1. Create a MdDialog component and place MdAutocomplete on it.
  2. Start typing.
  3. Try to find the results list.

Which browser?

  • Chrome 89.0.4389.114
  • Firefox 87.0
  • Edge 89.0.774.68

I tried vue-material versions 1.0.0-beta-15 and 1.0.0-beta-14.

What is expected?

Expected result is to see the results list.

What is actually happening?

The results list is hidden beneath the dialog. Checking the results lists, that is the div element that is created with md-menu-content class, it has an z-index of 9, while the dialog has z-index of 11. Sure enough, this means the dialog will cover the list.

The funny part is that when I look at the source code for MdMenu, I can see that this style class has z-index set to 60. However, when I check my node_modules CSS file that I am importing, it definitely has z-index set to 9. No idea why this is happening or how to fix it, really. :(

I can work around by manually editing the CSS file and setting the z-index value to the needed value, but that is hardly ideal, really.

Reproduction Link

N/A

blackdwarf commented

Don't work late nights, I guess. !important rule also works as a workaround. However, the bug is still there.

  • 👍1