固定侧边栏也修复日期选择器下拉菜单。怎么解决?
我有一个非常简单的页面,页面左侧有一个固定的侧边栏。在右侧,在内容区域中,我有一个日期选择器。但我不希望边栏在上下滚动的同时滚动右边的主要内容。所以,我有固定用下面的CSS内容区域:固定侧边栏也修复日期选择器下拉菜单。怎么解决?
.content {
overflow: auto;
height: 100%;
}
但问题是,由于上述CSS的,当日期选取器在内容区域中打开,它在滚动过程中不会移动。这里是一个完整的例子在这个小提琴: Fiddle
日期选择器不滚动时与字段一起移动。我该如何解决它?还有什么办法可以根据浏览器屏幕区域在输入字段之上或之下动态地打开它? (就像目前它在右上方打开,即使它不能被完全看到,因为它设置为pickerPosition: 'top-right'
,这是非常不方便的。)
在此先感谢您的建议。
使用滚动事件和一些数学
$('.content').on('scroll',function(){
var offset = $('#datetimepicker').offset().top;//get the offset of the element
$('.datetimepicker').css({'top':offset-$('.datetimepicker').height()-20});//set the offset to the picker modal subtract its height and the input height
});
非常感谢。尽管如此,我还是一个迟到的学习者,但我也会真正关注'数学'。但是我想知道如何根据上面或下面提供的浏览器区域打开它,正如我在问题中提到的那样? – Ashonko
你在一些ifs(你知道**数学**)中做一些布尔操作来测试窗口和输入之间的模式是否合适 – madalinivascu
哦,不!再次说'数学'!如果我问一个例子,会不会太多?我是一个迟到的学习者,但我是一个很好奇的人。不过谢谢你的帮助。 :) – Ashonko
我建议滚动期间关闭的DateTimePicker是更好的主意。就像用户点击其他内容或滚动条时一样。
$(".content").scroll(function() {
if ($(".datetimepicker").css("display") == "block")
$(".datetimepicker").css("display", "none");
});
这将是一个非常好的解决方案。谢谢你的努力。 :) – Ashonko
使侧边栏固定并具有静态宽度,然后应用一个左边距与侧边栏宽度的内容。而且也没有必要上浮,因为边栏元素已经从剩余的DOM(固定位置)的独立层
$(document).ready(function() {
$('.form_datetime').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
pickerPosition: 'top-right',
});
});
html,
body {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.sidebar {
position: fixed;
width: 120px;
top: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center center;
}
.content {
position: relative;
margin-left: 120px;
width: calc(100vw - 120px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
<div class="wrapper">
<div class="sidebar">
<div class="sidebar-wrapper">
<p>Sidebar</p>
</div>
</div>
<div class="content">
<p>
||<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br>
</p>
<div class="form-group">
<label for="name" class="col-md-2">Date</label>
<div class="col-md-5">
<div class="input-group date form_datetime" id="datetimepicker">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="fa fa-times-circle"></span></span>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
</div>
<p>
||<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br> ||
<br>
</p>
</div>
</div>
哇!非常感谢你。这是处理我内容领域未来事件的最佳方法。我非常感谢你在这方面的时间。 – Ashonko
不客气。 –
的日期选择器有一个绝对的位置,这样你就需要计算在滚动上的顶部位置 – madalinivascu
任何建议如何实现这一目标? @madalinivascu – Ashonko
你使用数学,就像听到一些高度,获得一些职位,你知道数学不是吗? – madalinivascu