打印可滾動boootstrap模式

Question

我在我的新的web應用程序中有一個模式，我想打印模式內容，模式是可滾動的。現在，我只能打印可查看的內容。什麼是我應該做的更正我的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">&times;</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

你實現你的CSS的是正確的做法，但你需要做什麼，目前有類滾動，當您打印出文檔時可見。

如果你想改變的CSS而不是HTML：

@media print { 
    /* if modal-body is your scrollable class */ 
    .modal-body { 
    width: auto; 
    height: auto; 
    overflow: visible !important; 
    } 
} 

Code pen link