HTML printing - PHP

Asked

Viewed 329 times

4

Next... I have an HTML structure formed by TABS, the style of these link: http://www.codecovers.eu/materialadmin/ui/tabs#second1 But when printing with Ctrl+p just call the TAB that is Active. How do I print the contents of all TABS?

<div class="col-md-6">
    <div class="card">
        <div class="card-head">
            <ul class="nav nav-tabs" data-toggle="tabs">
                <li class="active"><a href="#first1">FIRST TAB</a></li>
                <li><a href="#second1">NO. TWO</a></li>
                <li><a href="#third1">THE THIRD</a></li>
            </ul>
        </div><!--end .card-head -->
    <div class="card-body tab-content">
        <div class="tab-pane active" id="first1">                        
           <p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
        </div>
        <div class="tab-pane" id="second1">                     
           <p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
        </div>
        <div class="tab-pane" id="third1">                      
           <p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
        <p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
        </div>
    </div><!--end .card-body -->
</div><!--end .card -->

1 answer

2


You can use a specific CSS rule for when printing, and that forces what is hidden with display: none; to be visible when printing.

In your HTML it would be something like this:

@media print {
    .tab-pane {
        display: block !important;
    }
}

You can put that code in your CSS file or the HTML page like this:

<style>
@media print {
    .tab-pane {
        display: block !important;
    }
}
</style>
  • Where do I put this code?

  • @Rodrigosegatto added this example to the answer too.

  • Okay. It works well, but it leaves something to be desired at one point. I may be able to give myself more of this help.... The title of Tab1 and Tab2 is before the two contents in the print. It would be like the title of the tab2 to skip to before the contents in the print?

  • @Rodrigosegatto yes and no. Since these DOM elements are not with each other this will be complicated. Either create other elements that have this function and only the samples in the print (hiding the current ones) or position everything with closed positions to have control over the positioning.

  • Yeah, I don’t think I understand what Sergio means.

  • I got Sergio. I created titles with display 'None' on top of the contents. This way when printing I activate the titles and hide the main title of the TABS. Your solution was great :)

  • @Rodrigosegatto good! I was away but by your description I think you’ve figured out what I meant. If you have more questions you can ask here or in a new question. See you soon

  • I have something still related to printing. In case you want to answer right here. Usually whatever is link, the print brings the whole path and not the real word of the link. It has how to modify?

  • @Rodrigosegatto did it. Now I have no way to test but I think you have to go through the content as here: http://stackoverflow.com/a/14931127/2256325 -> this is actually an interesting and useful question that could be as a separate question for future needs of others.

  • Show. It was standard guy :D

Show 5 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.