I have the basic bootstrap tabs set up with no dynamically inserted content and print specific media queries in my base stylesheet. When the user prints from the browser I want all the tab content to print, not just the active tab. I know there has to be an easy solution to this, I just can't figure it out.
2 Answers
try this in your print media query:
.tab-content > .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
-
Perfect. That did it. Thanks! I'd upvote you but I'm relatively new to SO. Dec 20, 2012 at 17:54
-
Cool -- You should be able to accept the answer by clicking to the left of the number. Dec 20, 2012 at 18:06
-
1This also helps when trying to generate PDF version of a webpage with PhantomJS May 15, 2014 at 6:45
-
3
-
4Just what I needed. I also added
page-break-after: always
to get a page break in the print output after each tab section. Plus.nav-tabs {display:none;}
also in the @media print query gets rid of the tabs themselves Sep 30, 2016 at 10:34
@Scott's answer didn't work for me, and I think it is because I'm using bootstrap 4.
This is what worked for me in bootstrap 4. I added the display helper classes d-print-block
, d-none
, and d-print-none
where appropriate.
I didn't want the top nav bar to print at all, so I added d-print-none
<ul class="nav nav-tabs nav-bordered d-print-none" role="tablist" id="mainTabs">
I wanted the individual tab-pane
s to print if on print media, so I added a header to the tab pane's content and added the d-none
class so it wouldn't show in the browser, but also added d-display-block
so it WOULD should in print media. I also added d-print-media
to the tabpanel div itself so that it would show the entire contents in print media.
<div role="tabpanel" class=" fade in show active tab-pane d-print-block" id="myTab">
<div class="header-title d-none d-print-block">My Tab Name</div>
Lorem ipsum dolor sit amet...
</div>
-
In my case, all my info is on a modal, but Chrome doesnt see that and cuts off the modal. Any ideas? Feb 7, 2019 at 16:46