[英]BsDatePicker hiding behind modal
<!-- The Server Modal -->
<div class="modal" id="serverModal">
<div
class="modal-dialog"
style="max-width: 80%;overflow-y: initial !important;"
>
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">
User # {{ globals.currentUser }}
</h4>
</div>
<!-- Modal body -->
<div
class="modal-body"
style="max-height: calc(100vh - 200px);
overflow-y: auto;"
>
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>
<div class="row">
<div class="col-6" style="width:150px;">
ObsoleteServerActionDate
</div>
<div class="form-group col-6">
<input
type="text"
placeholder="DOJ"
class="form-control"
bsDatepicker
[bsConfig]="{
dateInputFormat: 'MM/DD/YYYY',
containerClass: 'theme-dark-blue'
}"
/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button
type="button"
class="btn btn-primary"
data-dismiss="modal"
(click)="SaveServer()"
>
Save
</button>
<button
type="button"
class="btn btn-danger"
data-dismiss="modal"
(click)="CancelServer()"
>
Cancel
</button>
</div>
</div>
</div>
</div>
在模態內的表格中有一個bsDatePicker
。 當我打開模態時,日期選擇器只是隱藏在模態后面。
我已經通過為bsDatePicker
輸入元素提供一個類並設置其z-index: 3000 !important
來嘗試z-index
解決方案,但它仍然顯示在模態后面。 為什么要這樣做?
我想您需要將z-index
設置為容器元素。 你應該這樣做:
.theme-dark-blue {
z-index: 3000 !important;
}
由於它有一個 config 屬性,你可以利用它:
[bsConfig]="{ dateInputFormat: 'MM/DD/YYYY', containerClass: 'theme-dark-blue show-at-top' }"
.show-at-top{
z-index: 3000 !important;
}
在輸入元素的父鏈中,您需要提供 css position:relative
to first td
代碼中的輸入元素下方需要有一個父元素,其position:relative
<input type="text"
placeholder="DOJ"
class="form-control"
bsDatepicker [bsConfig]="{ dateInputFormat: 'MM/DD/YYYY', containerClass: 'theme-dark-blue' }">
我曾經通過在父鏈中的第一個td
元素中執行此操作來解決此問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.