[英]How to toggle the z-index values to make the image appear into front or to background?
[英]how to make the date appear completely in vuejs-datepicker (z-index)
我在collapse element
中的 v-server-table 組件中有一個vuejs-datepicke
組件
div.collapse > v-server-table.test-table > span > div.form-group > datepicker
<div :class="{ 'show' : (wheel.id == defaultOpenedWheel || searchKey !== null)}" class="collapse"
data-parent="#accordion"
role="tabpanel"
v-bind:aria-labelledby="'heading-'+index" v-bind:id="'collapse-'+index">
<v-server-table :columns="columnCompetences"
class="test-table"
:options="options"
:show-pagination="false"
@loaded="onLoaded"
v-bind:ref="'wheel_'+wheel.id"
v-bind:url="'/api/competences?wheelId='+wheel.id+'&querySearch='+searchKey+'&memberId='+memberId">
<span slot="target_date" slot-scope="{row}">
<span v-if="rowToShow !== 'row'+row.id">{{formDate(row.target_date)}}</span>
<div class="form-group" v-if="rowToShow === 'row'+row.id">
<datepicker :format="customDateFormat" :input-class="'form-control'"
v-model="updateRow.target_date"></datepicker>
<small class="form-text text-danger"
v-if="formErrors !== null && formErrors.target_date!==undefined"> {{formErrors.target_date[0]}} </small>
</div>
</span>
問題:日期選擇器未完全顯示(我認為是 z-index 問題),我必須向下滾動!
嘗試將此添加到您的范圍樣式中:
<style scoped >
>>> .vdp-datepicker__calendar {
position: fixed;
}
// Your other styles..
</style>
或者,如果您使用的是 SCSS:
<style scoped lang="scss">
::v-deep .vdp-datepicker__calendar {
position: fixed;
}
// Your other styles..
</style>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.