Javascript 隐藏在modal后面的BsDatePicker 用户#{globals.currentUser} 过时服务器操作日期 拯救 取消
在模式内的表格中有一个Javascript 隐藏在modal后面的BsDatePicker 用户#{globals.currentUser} 过时服务器操作日期 拯救 取消,javascript,css,bootstrap-4,bootstrap-modal,bootstrap-datetimepicker,Javascript,Css,Bootstrap 4,Bootstrap Modal,Bootstrap Datetimepicker,在模式内的表格中有一个bsDatePicker。当我打开模式时,日期选择器只是隐藏在模式后面 我尝试了z-index解决方案,为bsDatePicker输入元素提供了一个类,并将其z-index:3000!重要信息,但它仍显示在模式后面。它为什么要这样做?我想您需要为container元素设置z-index。您应该这样做: <!-- The Server Modal --> <div class="modal" id="serverModal&qu
bsDatePicker
。当我打开模式时,日期选择器只是隐藏在模式后面
我尝试了
z-index
解决方案,为bsDatePicker
输入元素提供了一个类,并将其z-index:3000!重要信息
,但它仍显示在模式后面。它为什么要这样做?我想您需要为container元素设置z-index
。您应该这样做:
<!-- 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>
由于这是一个config属性,您可以利用它:
.theme-dark-blue {
z-index: 3000 !important;
}
在输入元素的父链中,您需要将css
位置:relative
指定给firsttd
下面代码中的输入元素需要有一个具有位置:relative的父元素
[bsConfig]="{ dateInputFormat: 'MM/DD/YYYY', containerClass: 'theme-dark-blue show-at-top' }"
.show-at-top{
z-index: 3000 !important;
}
我曾经在父链的第一个td
元素中解决过这个问题,谢谢你的回答。不幸的是,它仍然不起作用。如果应用这种风格,实际会发生什么?你也能贴出来吗?目标元素是否应用了此css类?未应用css类“主题深蓝色”。是否有任何css文件我应该包括?检查这个
<input type="text"
placeholder="DOJ"
class="form-control"
bsDatepicker [bsConfig]="{ dateInputFormat: 'MM/DD/YYYY', containerClass: 'theme-dark-blue' }">