Print scrollable boootstrap modal - css

Question

I have one modal in my new web application ,I want to print the modal content,the modal is scrollable.Now i can only print the content that is viewable.What are the corrections that i should make in my style.css.
index.html
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 ALIGN="center" class="modal-title">MR FINANCE</h4>
</div>
<div class="modal-body" >
<div class="row">
<div class="col-xs-6">
<div class="form-group">
Name:<input type="text" ng-model="cstmrname" class="form-control" placeholder="Jane Doe" >
</div>
<div class="form-group">
Phone:<input type="number"ng-model="cstmrphone" class="form-control" placeholder="8086502009">
</div>
</div>
<div class="col-xs-6 ">
<div class="text-right">
<p ><STRONG >GLID:{{(GLID.GLID-0)+1}}</STRONG></p>
{{date | date:'MM-dd-yyyy'}}<br/>
{{place}}
</div>
<div class="form-group">
Address: <textarea type="text" class="form-control" ng-model="cstmradress" rows="2"></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<h4 align="center">
Ornaments
</h4>
<form class="form-inline form-group">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-3">
<div class="form-group">
<select class="form-control" id="optioin1" ng-model="choice.option1" >
<option value="Ring" >Ring</option>
<option value="Earings" >Earings</option>
<option value="Chains">Chains</option>
<option value="Necklaces">Necklaces</option>
<option value="Bangles">Bangles</option>
</select>
</div>{{choice.option1}}
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="number" step="0.01" ng-model="choice.weight" class="form-control" placeholder="Weight" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">gm</span>
</div>
</div>
<div class="col-xs-4 pull-right">
<button class="btn btn-default" ng-show="$last" ng-click="removeChoice() "><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
<button class="btn btn-default" ng-show="$last" ng-click="addNewChoice()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="text-left"> Total Numbers:{{ choices.length}}</p>
</div>
<div class="col-xs-6"><p>Total Weight: {{total(number)}}gm</p>
</div>
</div>
<hr>
<form align="center" class="form-inline">
PledgeAmt:
<div class="input-group">
<input type="number" ng-model="pledgeamt" class="form-control" placeholder="{{(total()*2050)-3000}}-{{total()*2050}}" >
<span class="input-group-addon" id="basic-addon2">RS</span>
</div>
</form>
<hr>
<div class="row">
<h5 align="center"> Interest</h5>
<div class="col-xs-6">
<p> 1-3Month:{{ intrst[0].INTR1}}%({{(pledgeamt/100)*1}}RS/day)</p>
</div>
<div class="col-xs-6">
<p > 3-12Month:{{ intrst[0].INTR2}}%({{(pledgeamt/100)*2}}RS/day)</p>
</div>
</div>
<tr ng-repeat="ornament in data">
<td>{{ornament.GLID}}</td>
<td>{{ornament.WEIGHT}}</td>
<td>{{ornament.TOTGRAM}}</td>
</tr>
<div class="modal-footer">
<button type="button" ng-click="insertvalue()" class="btn btn-default" >Submit</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
style.css
.printable { display: none; }
#media print
{ .modal-footer,
.non-printable { display: none; }
.printable1 {
width: auto;
height: auto;
overflow: visible !important; }
}

Answer 1

You implementation of your css is the right approach but you will need to make whatever the class that currently has the scroll, visible when you print out the document.
If you wanted the css to be changed but not the html:
#media print {
/* if modal-body is your scrollable class */
.modal-body {
width: auto;
height: auto;
overflow: visible !important;
}
}
Code pen link