Tab Content Script (v 2.2) Print Problem

[drewc]

Tab Content Script (v 2.2)
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

I have been experiencing problems with printing my page after using Tab Content Script (v 2.2). When you hit your print button (or Ctrl P) in any browser, you get mixed results.

For example if you select tab 4, your printed copy will show you that tab 4 was selected, however, you will end up with information from tabs 1 through 4.

You can see this problem in action by just visiting the products page on DD at http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm . Try to switch to tab 3 then print the page. The printed copy will show you that tab 3 was selected but the printed information for tab 3 lists...

Tab content 1 here
Tab content 1 here
Tab content 2 here
Tab content 2 here
Tab content 3 here
Tab content 3 here
Tab content 4 here
Tab content 4 here

I'm also having issues with the script cutting off the printed information when the content goes past a certain point. This problem you cannot see on the example page of DD. If each tabs information is too long, your printed copy will not show all of the information that displayed in your browser. You can see all of the information in the browser just fine but the printed version will be cut off.

It seems like the original code located at http://www.dynamicdrive.com/dynamicindex17/tabcontent2.htm did not seem to have the selected tab print issues, however, I did not try to put in long text to check my other problem. I would like to use the newer code for its updated features but can't due to these issues. I know my site visitors will want to print the pages where this code will be in place.

Any ideas???

Thanks,
Drew

[jscheuer1]

That's actually a feature, as it is assumed that most designers want it that when the page is printed, all tabs will be printed. If you remove all instances of:


@media print {
.tabcontent {
display:block !important;
}
}

from the stylesheet, then presumably only the contents of the active tab will be printed. If after doing so, the other problem still persists, then there simply isn't enough room in the tabcontent classed divisions' parent element. It's style dimensions, or at least its print style dimensions would need to be enlarged, or set in such a way, in combination with the rest of the layout, to allow it to assume whatever dimensions it needs to in order to display all of any given tab's content..

But, since presumably what is causing the problem in the first place is too much content from the printing of the combined tabs' content, this may no longer be an issue.

[drewc]

Thank John for your reply. I noticed shortly after I posted that the problem with my first issue was the code you listed...

@media print {
.tabcontent {
display:block !important;
}
}

Your knowledge was right on target. My second issue is a problem with my main site wrapper of which I'm still trying to fix with not much luck. When I took out the css for my main site wrapper, the print worked just fine.

[jscheuer1]

Post a link to your page with your stylesheet that is causing the problem, and I can probably figure it out. The main concept though is, if the container (and/or the parents of the container) of the tabcontent divisions has both width and height set, it is limited. At least one dimension (width or height) should be left unspecified so that it can expand in that dimension if needed to show all of its content.