css - Vue自定义下拉菜单未显示在模式上

Question

我已经从https://desislavsd.gitbook.io安装了一个模块并将其用于我的自定义模式。但是我有麻烦下拉不重叠并卡在这里，即使调整z-index:999没有做任何事情。

我也尝试对高度进行调整，但是在单击自定义组件时却不起作用，因为如果我在显示下拉列表之前已经使模态的高度更高，它会在下拉列表下方留下一个很大的空间，这是不友好的看着。

自定义模块https://jsfiddle.net/desislavsd/es2n6py0/

只要显示列表，就可以调整模式 onclick 的高度或重叠下拉列表。

    <div class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9" v-if="getSelectedFilterType == 'connectivity'">
        <div class="filter-header">
            <h6>Connectivity</h6>
            <div class="filter-close-btn" @click="hideModal('')">
                <i class="fa fa-times fa-lg" aria-hidden="true"></i>
            </div>
        </div>
        <div class="row pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
            <p class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available to All Tenants</p>
            <v-select v-model="selected.browsers" as="name:id:id" :from="browsers" tagging :tag-keys="[9,32,188]"></v-select>
        </div>
    </div>
-------------------------------------------------------------------------
<!-- Inspector code -->

<div data-v-796ce895="" class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9">
    <div data-v-796ce895="" class="filter-header">
        <h6 data-v-796ce895="">Connectivity</h6>
        <div data-v-796ce895="" class="filter-close-btn">
        </div>
    </div>
    <div data-v-796ce895="" class="row filter-tags pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
        <p data-v-796ce895="" class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available
            to All Tenants</p>
        <div data-v-796ce895="" tabindex="-1" class="v-select -empty -multiple">
            <div class="v-select-bar">
                <div class="v-select-inp-group"><input placeholder="Search.." class="v-select-inp"><button type="button"
                        tabindex="-1" class="v-select-btn-clear"></button><button type="button" tabindex="-1"
                        class="v-select-btn-dd"></button><button type="button" tabindex="-1"
                        class="v-select-btn-spinner"></button></div>
            </div>
            <div class="v-select-list">
                <span class="v-select-option">Internet Explorer</span>
                <span class="v-select-option">Firefox</span>
                <span class="v-select-option">Chrome</span>
                <span class="v-select-option">Opera</span>
                <span class="v-select-option">Safari</span>
                <span class="v-select-option">Opera3</span>
                <span class="v-select-option">Opera2</span>
                <span class="v-select-option">Opera2</span>
                <span class="v-select-option">Opera1</span>
                <span class="v-select-option">Opera11</span>
            </div>
        </div>
    </div>
</div>

CSS

.filter-body-w-auto[data-v-796ce895] {
    display: inline-block;
    z-index: 99;
    background: white;
    border-radius: 6px;
    box-shadow: 4px 4px 4px rgb(0 0 0 / 20%);
    top: 400px;
    transform: translate(-50%, 0);
    overflow: hidden;
    position: fixed;
    height: 500px;
    max-height: 100%;
}
.filter-header[data-v-796ce895] {
    background: #466cb3;
    padding: 10px 17px;
    color: #FFF;
    width: 100%;
    text-align: left;
}

第 3 方 css 模块：https ://github.com/desislavsd/vue-select/blob/master/dist/vue-select.css 顺便说一句，我在这里也使用了一些引导类和自定义样式

尴尬的设计，但如果重叠不起作用，另一种可能的解决方案

标签： cssvue.jsbootstrap-modal