Printing MooTools Accordion Items
Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the user tries to print the page. Luckily MooTools Core Developer Thomas Aylott provides a simple fix.
The CSS Fix
@media print {
.element { height:auto !important; }
}
That's it -- no joke. Setting a print-specific height of auto with the ever-useful !important declaration fixes everything.
Big ups to @subtlegradient for the solution. Another reason I'm so happy to be surrounded by clever developers.
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![MooTools Equal Heights Plugin: Equalizer]()
Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're...
![Display Images as Grayscale with CSS Filters]()
CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery. CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale.
Doing so requires the...
wow… that is really enlightening. thanks for sharing
I tell you what, i don’t have a use for this right now, but it’s one of those things that will undoubtably drive me crazy in the future. Very nice dude, i’ll keep it mind.
Thanks for posting about print stylesheets – they are something which are all too often overlooked, but a very important part of web development in my opinion.
So simple… Thanks for the tips.
@media print { .element { display:inline !important; } }should also work
I’ve recently run up against this problem. The script provided works fine, but as far as I can tell, you can’t use the opacity effect with the accordion.
I’ve added:
body div.element { height:auto !important; display:inline !important; opacity:1 !important; filter:alpha(opacity=1); !important; }To my print css, but it doesn’t fix the problem. If anybody knows of a solution, then I’m certainly listening. :)
(Accordion mootools)…can be linked to any part of which is not active? How? I thank you in advance
@David: The same problem. Height:auto works but no text is show.
Thanks for this was bugging me for ages. The text was disappearing for me too but the “display:inline !important” seems to fix it (Thanks to Gui).
Saf
Neither of the fixes presented here have worked for me. Only the section headline shows up on print.
If anyone still comes across this problem: only the following code helped me (jQuery Accordion):
.ce_accordion { display: block !important; height: auto !important; }