# Z-Index on dropdowns (multiselect)

**URL:** <https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332>\
**Category:** Support\
**Created:** [December 14, 2023, 12:43am UTC](https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332 "2023-12-14T00:43:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kayden](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/kayden/32/160_2.png) [@Kayden](https://community.feathery.io/u/Kayden)\
**Post date:** [December 14, 2023, 12:43am UTC](https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332/1 "2023-12-14T00:43:39Z")

</div>

I have a form embedded in a modal. When I tap the field and the drop down opens, the options appear behind the modal. So maybe the list has a fixed z-index that is lower than my modal?

This is happening specifically for the dropdown multi-select field. The regular dropdown seems to work find, as it’s appears to be using the native dropdown.

 ![Screenshot 2023-12-13 at 5.28.28 PM](https://canada1.discourse-cdn.com/flex030/uploads/feathery/original/1X/7a2ac0cc905cdd7fb992f7233185a20482d5e5c2.png)

---

<div class="post-metadata">

**Author:** ![peter](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/peter/32/7_2.png) [@peter](https://community.feathery.io/u/peter)\
**Post date:** [December 14, 2023, 2:55am UTC](https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332/2 "2023-12-14T02:55:47Z")

</div>

yep, i think this is a z-index issue. if you decrease the z-index of your modal to be smaller than that of the multiselect dropdown, it should be fixed

---

<div class="post-metadata">

**Author:** ![Kayden](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/kayden/32/160_2.png) [@Kayden](https://community.feathery.io/u/Kayden)\
**Post date:** [December 14, 2023, 3:15pm UTC](https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332/3 "2023-12-14T15:15:55Z")

</div>

I need the modal to be at a higher index to avoid elements that are under the modal from appearing on top.

Example z-indexes-  
site:0  
navbar: 1  
modal: 2  
form embed: 2 or 3

The drop-down appears to be hardcoded to 1.

Can we get it to respect a form zindex? Or add a zindex field that I can override it with?

---

<div class="post-metadata">

**Author:** ![Kayden](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/kayden/32/160_2.png) [@Kayden](https://community.feathery.io/u/Kayden)\
**Post date:** [December 14, 2023, 3:19pm UTC](https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332/4 "2023-12-14T15:19:32Z")

</div>

Or even a higher hard coded z-index would work. I assume that you would always want your dropdown menu to appear on top of any other elements and never below.

---

<div class="post-metadata">

**Author:** ![peter](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/peter/32/7_2.png) [@peter](https://community.feathery.io/u/peter)\
**Post date:** [December 14, 2023, 9:34pm UTC](https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332/5 "2023-12-14T21:34:21Z")

</div>

we’ve gone ahead and updated this on th latest version