Tengo una lista desplegable personalizada en el primer elemento colapsado. Cuando amplío la lista desplegable, la opción de lista está bloqueada por el segundo elemento colapsado.

 <el-collapse v-if="currpage == 'edit'"> <!-- 1st tab --> <el-collapse-item class="collapseheader" title="Contact" name="1"> <InputAutocomplete2 :items="positionlist" :initval="cur_vendor.ContactPositionIDn2" :placeholder="$t('Position')" :key_field="'IDn'" :value_field="'PositionName'" @input="setinput_contactposition2" /> </el-collapse-item> <!-- 2nd tab --> <el-collapse-item class="collapseheader" title="Carrier" name="2"> <!-- Some stuff here... --> </el-collapse-item> </el-collapse>

 <style> .autocomplete2 { position: relative; } .autocomplete2-results { padding: 0; margin: 5px 0; border: 1px solid red; border-radius: 4px; height: 150px; overflow: auto; position: absolute; background-color: white; width: 100%; z-index: 999; } .autocomplete2-result { list-style: none; text-align: left; padding: 4px 2px; cursor: pointer; } .autocomplete2-result:hover { background-color: #4AAE9B; color: white; } </style>

Como se muestra en la imagen de arriba, el borde rojo son las opciones de mi lista desplegable y está bloqueado por la segunda pestaña. Lo que estoy tratando de lograr es que la lista se muestre en la parte superior de la segunda pestaña.

Intenté jugar con CSS:property y CSS:z-index pero no tuve suerte. También encontré esta publicación sobre el colapso de la interfaz de usuario del elemento StackOverflow en el frente si hay otros componentes, pero hay algunas diferencias leves en nuestro problema, por lo tanto, la solución no funcionó para mí.

¿Alguna sugerencia? ¡Gracias!

Actualización 1: 16-03-2022

Como se sugirió, he creado el mismo problema en https://codesandbox.io/s/vue-template-forked-5oy4lw