Search code examples
jquery-uijquery-ui-accordion

How can I change or turn off jQuery UI accordion's fixed-height inline style?

I have a <p> in a jQuery UI accordion that appears:

<p class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 184px " role="tabpanel">

Earlier, when I had several text links in there, it fit perfectly. However, now I have image links, and the images are sharply clipped.

I can duct tape the matter by adding additional <br /> tabs to get more space, but I'd like the accordion panel to include all images, one above the other, and correctly sized.

Solution

  • I had the same problem with the jQuery Accordion, and I just found the fix!

    Simply add this CSS code at the top of your page. It will override the auto crop happening on the thumbnails:

    .ui-accordion-content {
  min-height:auto !important;  
}