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