css - Formatting bootstrap panels for printing -

i'm having problem formatting bootstrap panels printing. charts being contained within bootstrap panels overrun panel border on right side (only when print though, looks fine on actual web page) , charts split page breaks. i've tried using print media queries , using page-break-inside , page-break-after nothing working (i doing wrong though).

here code utilizing bootstrap panels. i'm using font awesome interactive buttons , i'm using canvasjs charts.

<div class="row">         <div class="col-sm-6">             <div class="panel panel-primary">                 <div class="panel-heading">                     <h3 class="panel-title">work orders priority                         <a data-toggle="collapse" data-target="#collapse1">                             <span class="fa fa-line-chart pull-right panelcolbtn rotate"/>                         </a>                     </h3>                 </div>                 <div id="collapse1" class="panel-collapse collapse in">                     <div class="panel-body">                         <div>                             <div id="chartcontainer1" style="height: 450px; width: 100%;"></div>                         </div>                     </div>                 </div>             </div>         </div>         <div class="col-sm-6">             <div class="panel panel-primary">                 <div class="panel-heading">                     <h3 class="panel-title">% of work requests repair tags                         <a data-toggle="collapse" data-target="#collapse2">                             <span class="fa fa-line-chart pull-right panelcolbtn rotate"/>                         </a>                     </h3>                 </div>                 <div id="collapse2" class="panel-collapse collapse in">                     <div class="panel-body">                         <div>                             <div id="chartcontainer2" style="height: 450px; width: 100%;"></div>                         </div>                     </div>                 </div>             </div>         </div>     </div> 

here had tried print media query attempt resolve page break issue.

@media print {     div.panel, div.panel-primary {         page-break-inside: avoid !important;         page-break-after: auto !important;     } } 

i checked out thread before coming here , followed along seems original poster never able working correctly either. printing twitter bootstrap correctly

can shed light on how issue resolved?