page break inside not working in my print

99 Views Asked by At

I have multiple components which looks like this:

@media print {
  .print-wrapper {
    page-break-inside: avoid;
    display: inline-block;
  }
}
<div class="print-wrapper">
 <div data-appear-animation="fadeInRightBig" class="card animated fadeInRightBig mb-5 benchmarkCard">        <div role="tab" id="heading6" class="card-header">
        <a data-toggle="collapse" href="#remarketingUtilization" aria-expanded="true" aria-controls="remarketingUtilization" class="collapsed">
        <i aria-hidden="true" class="fa fa-refresh"></i> 
           <strong class="adwords-category">Remarketing Utilization</strong> 
            <span class="pull-right total-score">
                14%
            </span>
        </a>
    </div> 
    <div id="remarketingUtilization" role="tabpanel" aria-labelledby="headingThree" class="collapse show">
        <div class="card-block p-4">
            <div class="row">
                <div class="col-md-12">
                    There are just 3 ways you can grow your business. By generating more Traffic,increasing
                    your Conversion Rate and optimizing Customer Value. But getting traffic
                    is easy... what will set you apart from the rest is building sustainable customer
                    relationships. Trust, relevance and user experience are the main ingredients
                    to achieve exactly that. Dasbot will assist you on all 3 growth levers. For instance, when
                    the Page Speed of your landing pages is slow, Dasbot will help you
                    optimize page load time.
    
                    <div class="btn-wrapper">
                        <button class="btn btn-outline mt-4 btn-compare">See
                            how you compare
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

in my print.scss I say that card page-break-inside has to be avoiden:

 .card {
   page-break-inside: avoid;
 }

But this results in this output in print:

enter image description here

0

There are 0 best solutions below