search

vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.88k stars 1.16k forks source link

MdAutocomplete results list not visible when used on MdDialog #2324

Open blackdwarf opened 3 years ago

blackdwarf commented 3 years ago

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?

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 3 years ago

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