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.
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![jQuery Comment Preview]()
I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday.
The XHTML
The CSS
The jQuery JavaScript
On the keypress and blur events, we validate and...
![Dijit’s TabContainer Layout: Easy Tabbed Content]()
One of Dojo's major advantages over other JavaScript toolkits is its Dijit library. Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates. One very useful layout class is the TabContainer. TabContainer allows you to quickly create a tabbed content...
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; }