JscrollPane Always Visible/Displays Inside Accordion Content

Question

My problem is that the JScrollPane always displays despite the content area having a CSS overflow:auto. The vertical scrollbar always displays even if there is one item.

Now, I have the JScrollPane inside an accordion. The accordion content is dynamically generated by .Net. I rebind the JscrollPane after any updates and have the setting to

Here is the rendered html.

 <div class="accordion-content jspScrollable" style="overflow: hidden; padding: 0px; width: 182px; display: block;" tabindex="0">
  <div class="jspContainer" style="width: 182px; height: 62px;">
    <div class="jspPane" style="padding: 4px 0px 5px 2px; width: 168px; top: 0px;">
      <div class="cb-row">
        <input type="checkbox" value="Cosco" name="retailer" id="Cosco-0">
        <label style="padding:0 0 0 4px; vertical-align:middle" for="Cosco-0">Item A:</label>
        <span class="cb-result">2</span></div>
      <div class="cb-row">
        <input type="checkbox" value="Kroger" name="retailer" id="Kroger-1">
        <label style="padding:0 0 0 4px; vertical-align:middle" for="Kroger-1">Item B:</label>
        <span class="cb-result">2</span></div>
      <div class="cb-row">
        <input type="checkbox" value="Pet Specialty" name="retailer" id="Pet Specialty-2">
        <label style="padding:0 0 0 4px; vertical-align:middle" for="Pet Specialty-2">Item C:</label>
        <span class="cb-result">1</span></div>
    </div>
    <div class="jspVerticalBar">
      <div class="jspCap jspCapTop"></div>
      <div class="jspTrack" style="height: 62px;">
        <div class="jspDrag" style="height: 55px; top: 0px;">
          <div class="jspDragTop"></div>
          <div class="jspDragBottom"></div>
        </div>
      </div>
      <div class="jspCap jspCapBottom"></div>
    </div>
  </div>
</div>

So, I have no idea what is causing the style="overflow:hidden... in the accordion-content. It strikes me that it should be auto so that the scrollbars will display when required. However, I am not adding this inline style. Does JSP add this?

When I view the CSS in Firebug it shows that my overflow:auto is crossed out.

Another idea is that the margin on the bottom of the content area is causing something in the JSP to trigger.

I have read that JSP wants a height to be defined, but since the content is dynamic, I cannot always set the height.

Answer 1

Apparently, height is required for the content area. I had to calculate the height dynamically using JQ and then apply that to each content area.