Bootstrap modal overflow

Show modal with max height + overflow scroll

by Pranav Desai

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>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Feedback
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Please provide us feedback</h4>
            </div>
            <div class="modal-body">
      <form action="http://survey.vovici.com/se/705E3F053B76C21B" method="post" enctype="multipart/form-data">


			<label for="Q1">Were we able to help you today?</label>

      <br />

    	<textarea class="form-control" name="Q1" id="Q1" rows="3" cols="100" role="textbox" aria-multiline="true"></textarea>

      <br />


	    <input type="hidden" id="CurrentPageId" name="CurrentPageId" value="1"><input type="hidden" id="SurveyId" name="SurveyId" value="705E3F053B76C21B"><input type="hidden" id="SessionKey" name="SessionKey" value="bc54e84a-e6da-4bd7-9165-bebb4e81fee2">


      <input type="submit" name="submit" value="Submit Survey">

</form>
            </div>
            
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

CSS

.modal-body {
    max-height: calc(1000vh - 210px);
    overflow-y: auto;
}

.btn {
  position: absolute;
  top: 10%;
  left: 80%;
  display: inline-block;
  vertical-align: middle;
}