I use a bootstrap datetimepicker plugin (http://ift.tt/1lX6dYG) in my project.
- run in JsBin
- click on the input fields to open the datetimepicker
As one can see, the datetimepickers get cropped. liquid-container and liquid-child are a class from a 3rd party ember addon, and I have no control over it. By removing its overflow would alter its behavior.
I want to have the datepicker in the top layer, over the modal, so nothing crops it.
JsBin
.liquid-container {
position: relative;
overflow: hidden;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
.liquid-child {
overflow: hidden;
}
.modal-md-nd {
width: 70%;
z-index: 1000002;
}
.modal-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-body {
overflow: auto;
max-height: 70vh;
position: relative;
padding: 15px;
}
.tab-content{
padding: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://ift.tt/165UPWs"></script>
<script src="http://ift.tt/2iRmPan"></script>
<link href="http://ift.tt/2iRSqqq" rel="stylesheet" type="text/css" />
</head>
<body class="dark">
<div class="liquid-tether modal-dialog modal-md-nd" style="top: 0px; left: 0px; position: absolute; transform: translateX(168px) translateY(-6px) translateZ(0px);">
<div class="modal-content">
<div class="modal-header">
Header
</div>
<div class="modal-body">
<div class="tabs">
<ul class="nav nav-tabs">
<li><a>Foo</a></li>
<li class="active"><a>Bar</a></li>
</ul>
<div class="tab-content">
<div class="liquid-container">
<div class="liquid-child">
<form class="form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">Open upwards</label>
<div class="col-sm-8">
<div class="date input-group">
<input id="datetimepicker1" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">Auto</label>
<div class="col-sm-8">
<div class="date input-group">
<input id="datetimepicker2" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-sm-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu consectetur tellus, eget condimentum nisi. Mauris pulvinar orci ac mattis viverra. Nunc imperdiet mattis erat, in euismod enim aliquet eu. Morbi ut ipsum porta enim dictum consectetur et quis odio. Nunc et blandit augue. In hac habitasse platea dictumst. Mauris vitae bibendum ipsum. Cras pellentesque imperdiet dapibus. Vestibulum condimentum non lacus tempus lobortis. Integer accumsan, risus non luctus efficitur, ex dolor ullamcorper turpis, eget hendrerit sem libero sed eros. Proin iaculis, felis id rutrum dignissim, lacus ante bibendum nunc, vitae finibus turpis erat eu augue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
widgetPositioning: {vertical: 'top'}
});
$('#datetimepicker2').datetimepicker({});
});
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire