Элемент позади выпадающего содержимого, отображаемый спереди / с выпадающим содержимым - PullRequest
Новая
       23

Элемент позади выпадающего содержимого, отображаемый спереди / с выпадающим содержимым

0 голосов
/ 25 марта 2020

Вот что происходит, там не должно быть никакого элемента «Добавить вопрос» ... Он скрывается за выпадающим содержимым. Я попытался задать для z-индекса элемента Add Add значение, меньшее, чем z-index для dropdown-content, однако он по-прежнему отображается даже после добавления! Любое понимание будет оценено.

enter image description here

Вот мой код: 

<div v-for="(q, i) in questions" :key="i" class="d-flex flex-column">
    <p class="formTitle" style="margin-top: 24px;">Question {{i + 1}}</p>

    <textarea class="descTextArea" placeholder="Enter your question" />

    <div class="dropdown" style="width: 300px; margin-top: 24px;">
        <div class="input-group mb-3">
            <button
            class="form-control inputStyle text-left dropdownMenuButton"
            >{{q.type}}</button>
            <div class="input-group-append">
                <span class="input-group-text inputStyle">
                    <CaretDownIcon />
                </span>
            </div>
        </div>
        <div class="dropdown-content">
            <div v-for ="(op, i) in dropdownOptions" class="d-flex flex-row" :key="i"  @click="q.type = op.title">
                <img class="dropDownImage" :src="require(`../../../assets/images/dashboard/${op.icon}.png`)" height="35" width="50" />
                <div class="d-flex flex-column">
                    <p class="dropDownTitle">{{op.title}}</p>
                    <p class="dropdownText">{{op.desc}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
<hr style="color: #DCDEE4; height: 1px; width: 95%;" />

<div class="d-flex flex-row addQuestion" @click="AddQuestion">
    <PointsButton />
    <p class="labelText" style="margin-left: 12px; transform: translateY(5px)">Add question</p>
</div>

.dropdown {
  position: relative;
  display: inline-block;
  transform: translateY(-10px);
  margin-right: 16px;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content div {
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-content div:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.addQuestion {
    margin-top: 37px; 
    cursor: pointer; 
    width: 150px;
    // position: relative;
    // z-index: 0;
}

РЕДАКТИРОВАТЬ: удар

1 Ответ

1 голос
/ 27 марта 2020


Во-первых, ваш textarea открыт, но не закрыт,
Для вашей проблемы просто задайте z-index :1; для .dropdown вместо .dropdown-content.
Надеюсь, это поможет

...