我遇到一种情况,当用户滚动时,“日期时间选择器”下拉菜单没有停留在原位。先前使用.daterangepicker {position: fixed !important;}
的尝试均未成功,这导致Datetime Picker不能正确地固定在其位置上,并且还导致用户无法查看整个Datetime Picker下拉列表。
有没有一种方法可以使Datetime Picker菜单在滚动时保持固定,并且还允许用户查看Datetime Picker的全部内容?这个问题很难解决,我们将不胜感激。
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
.modal {
display: none;
z-index: -10000000000000;
padding-top: 100px;
left: 0px;
top: 0px;
width: 100%;
max-height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background: linear-gradient(-45deg, #89f7fe 0%, #66a6ff 60%, #23A6D5, #23D5AB);
margin:auto;
padding: 20px;
border: 1px solid #888;
width: 500px;
height: 500px;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;
}
.daterangepicker select {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="css/couponsexample.css" rel="stylesheet">
<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">
<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<button class="buttonTest" id="myBtn">New Discount</button>
</span>
</div>
<div class="card-body">
<div id="myModal" class="modal">
<div class="modal-content" >
<form id="msform">
<span class="close">×</span>
<fieldset>
<h2 class="fs-title">Time Period</h2>
<h3 class="fs-subtitle">Step 4</h3>
<input type="text" name="datetimes" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="couponsjs.js"></script>
</body>
</html>
答案 0 :(得分:0)
我认为这就是您的意思,至少这是我的理解。
添加此样式:
.card {
position: fixed !important;
top: 0;
right: 0;
left: 0;
}
.modal {
display: none;
z-index: -10000000000000;
padding-top: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(0%,-50%);
width: 100%;
max-height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal
现在将以top: 50%; left: 50%; transform: translate(0%,-50%);
居中
.card
现在将保持顶部,您可能定位了错误的选择器。
答案 1 :(得分:0)
在daterangepicker.js中设置:
this.parentEl = $(element).parent().closest('div');
或在daterangepicker函数中设置:
parentEl: $(element).parent().closest('div')
这将使日历相对于输入的父div而不是正文(默认),并将与输入一起滚动。
您可能还需要一些css调整,例如父级的相对位置和未隐藏的溢出。