Scrollbars in the Accordion

[baddog]

Hey all

I am using Prime UI in one of my projects and came across an issue that made my accordion component have scrollbars displayed when I included a DIV within the accordion tab that drops down.

Code: Select all

<div id="default">  
    <h3>Title 1</h3>  
    <div>  
        <div class=myclass> content </div>
    </div>     
</div> 

if you have this issue with your accordion component I have found a fix

in the CSS that comes with Prime UI (accordion.css) you need to change the content line from

.pui-accordion .pui-accordion-content{padding:1em 2.2em;border-top:0;margin-top:-2px;position:relative;top:1px;margin-bottom:2px;overflow:auto;zoom:1;}

to

.pui-accordion .pui-accordion-content{padding:1em 2.2em;border-top:0;margin-top:-2px;position:relative;top:1px;margin-bottom:2px;zoom:1;overflow:hidden !important;}

That should allow the accordion to still animate properly but will make those ridiculous scroll bars disappear.


Keep the Prime UI components coming! you guys over at Prime are doing great work!!