Bootstrap modal overflow
Show modal with max height + overflow scroll
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js"></script>
<div id="location-picker" class="modal fade in" tabindex="-1" role="dialog" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content full-height">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><strong><span aria-hidden="true">×</span></strong></button>
<form class="form-inline">
<div class="form-group">
<label for="location-picker-location">Location</label>
<input type="text" class="form-control" id="location-picker-location">
</div>
<div class="form-group">
<label for="location-picker-radius">Radius</label>
<select id="location-picker-radius" selected="5000" class="form-control">
<option>500</option>
<option>1000</option>
<option>2000</option>
<option>5000</option>
<option>10000</option>
<option>20000</option>
<option>50000</option>
</select>
<!--<input type="text" class="form-control" id="location-picker-radius">-->
</div>
<div class="form-group">
<label for="location-picker-latitude">Latitude</label>
<input type="text"...
CSS
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
#location-picker .modal-dialog{
width: 80%;
height:40%;
}
#location-picker .modal-body{
height: 100%;
}
.full-height{
height: 100%;
}