css - Mootools not show colspan td in tr hidden -
i want hide information in hidden row shown no respect colspan. have:
<table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td><div id="se">click here!!</div></td> <td>value 2</td> <td>value 3</td> </tr> <tr><td colspan="3" style="display:none;;">content</td></tr>
and mootools code
$('se').addevent('click',function(){ this.getparent('tr').getnext('tr').getelement('td').setstyle('display','block'); });
when click on "click here!" hidden row shown, not colspan.
see example here: http://jsfiddle.net/xvnhw/1/
this not mootools browser repaint of element has not considered rendering before.
move using css based setup, gets applied after engine parses cells , sets correct position.
$('se').addevent('click',function(){ this.getparent('tr').getnext('tr').getelement('td').removeclass('hide'); });
and css
.hide { display: none }
yet example of why inline element styles bad thing.
Comments
Post a Comment