Something strange is happening here - the Add question div shouldn't be visible. It's somehow appearing behind the dropdown content. I've attempted to adjust the z-index of the Add Question div, setting it to a lower number than the dropdown-content z-index, but even with !important added, it persists. Any help or suggestions would be greatly appreciated.
https://i.sstatic.net/9q5iA.png
Take a look at my code:
<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;
}
UPDATE: Still experiencing this issue