Dropdown is not visible because attached behind all app elements

[shershen08]

Due to this https://github.com/stfalcon-studio/stf-vue-select/blob/master/src/components/stf-select/StfSelect.vue#L89 the wrapper for the dropdown in attached to the DOM as the last element and may be not visible , for example when the some other popup is used.

Maybe that could be better either to attach in front or have an option where to attach it (simmilar to #5 )

[shershen08]

Fix is

• in CSS add to .stf-select__options.stf-select-options {z-index: 9999;}
• replace appending code with document.body.insertBefore(this.__selectOptionsWrapEl, document.body.childNodes[1])

[AndreySyagrovskiy]

@shershen08 .stf-select__options.stf-select-options {z-index: 9999;} maybe it is enough? And you can add it as custom css of your site without changing the library, cause your solution is good but it is not all time suitable.

[shershen08]

CSS part of the solution - you are right one can add in the application styles.
But the main problem is the position of the node in DOM, it's literally behind everything else. That's why adding it on top (or giving an option to do that may come handy).
I'll try to create a demo today and share with you

[AndreySyagrovskiy]

@shershen08 ok thank. I am looking forward your demo.

[shershen08]

here's a repo with a problem demo - https://github.com/shershen08/demo-stf-select-bug
in https://github.com/shershen08/demo-stf-select-bug/blob/master/src/App.vue I've added 2 variants of the select element , one in main part of the page, another in modal, that once can't be properly used

[AndreySyagrovskiy]

@shershen08 Thank you for demo, but z-index works in your case and document.body.insertBefore(this.__selectOptionsWrapEl, document.body.childNodes[1]) does not work. Maybe css is enough in your case.

[shershen08]

Hmm, strange, I'll check one again asap
Because in the real work app I had setup exactly as reproduced and z-index wasn't enough.

[AndreySyagrovskiy]

@shershen08 What is your browser? Is it all browsers or only one?
?

[shershen08]

it's about Chrome/FF

[AndreySyagrovskiy]

I add style and all worked to https://github.com/shershen08/demo-stf-select-bug

.stf-select_opened .stf-select__options {
z-index: 101;
}

[AndreySyagrovskiy]

@shershen08 check please

[shershen08]

Yes, it works. It's was my setup issue I guess.