Getting OffsetHeight CSS

[sandeepnair85]

Hello all,

I am very new to CSS and Javascript and I dont if i am posting it in right section, but since I have to do it in CSS i am posting it here. I am facing a problem as below

In our we are using an accordion. The one we have has two collapsible panes. When a pane is in minimzed mode the height of the section is made to 0 and when the pane is maximized, the height is dynamically set by picking the offset height as shown below


/* get a height of all accordian contents */
var aContentHeight = Y.all(".accordionContent").get('offsetHeight');
/* alert("hi"); */
/* hide all function*/
var hideAllContent = function(){
Y.all('.accordionContent').each(function(node) {
var anim = new Y.Anim({
node: node,
duration: 0.25,
to: { height: 0 }
});
var onEnd = function(){
Y.log("Animation end");
};
anim.run();
anim.on('end', onEnd);
});
};

/* call hide all function */
hideAllContent();

var buttonClick = function(em){
em.preventDefault();
hideAllContent();
var itemList = em.container.all('.accordionButton');
itemList.removeClass('on');
var node = em.currentTarget;
var indexofNode = itemList.indexOf(node);
var nodeNext = node.next();
var nodeHight = nodeNext.get('offsetHeight');
if(nodeHight === 0){
node.addClass('on');
var animShow = new Y.Anim({
node: nodeNext,
duration: 0.25,
to: { height: aContentHeight[indexofNode] }
});
Now my problem is I have been asked to render the page for print using just browser controls having this accordian component, such that if the node is minimized, while printing, the content should be visible in print(that is it should be maximized). To do so if i set the height of the div by finding the offsetHeight of the node, then it will work. The question is how can i get the offset height without making use of javascript and set the height? Is it possible to do?

[jscheuer1]

First of all, I'm assuming you know how to make a print stylesheet. If not let me know. In it I'd put this rule:


.accordionContent {
position: static !important;
height: auto !important;
}

Be sure to use the !important keyword as shown to override any scripted styles for these elements that might contradict these.

Note: This is just my best guess based upon the code you've shown us. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[sandeepnair85]

Thanks sir very much for the reply. I will try and let you know if it solves the problem. Thanks once again.

Regards,
Sandeep