heightStyle: “fill” is not working for accordion in Jquery

Question

- With the change in dimension of container I'm able to customize
width that is defined in #backlogEpic i.e 526px but height is not
customizing . To fill the vertical space allocated by its container,i have set the heightStyle option to "fill" but still its not working
out. Its taking is default height using 'auto'. How can i customize
my height.If you see in image ,expanded panel is going out of container.

     html:-  
        <div id="backlogEpic" class="ui-widget-content">
        <div id="backlogAccordion">  
        <--- accordian code---->   
        </div> 
        </div>

    css :-  
      #backlogEpic{  
      padding: 10px;    height: 200px;    width: 526px;    right: 25px;    }  

   javascript:-  


    $(function() {

      $( "#backlogEpic" ).resizable({
         minHeight:140,
          minWidth: 150,
          resize: function() {
              $( "#backlogAccordion" ).accordion( "refresh" );
          }
      });
      $( "#backlogAccordion" ).accordion({
          heightStyle: "fill"
      });    });

Answer 1

I have been fighting the same problem as you. My site is using jQuery 1.9.1 and jQueryUI 1.10.2. All my efforts had been on the parent div, but nothing from the documentation or discussions had worked. Yesterday I discovered the SO topic jquery 1.9 accordion height issue in which Mottie suggests modifying the CSS for each accordion panel instead of the parent:

#accordion .ui-accordion-content {    
    max-height: 400px;
    overflow-y: auto;
}

In the limited testing I have done since yesterday, this has solved my problem of the accordion overflowing its container.

Answer 2

The apperance suggests that there is a float that hasn't been cleared, causing the wrapping container to appear as it does. Try adding a "clear" element after your accordions:

.clearer{
clear:both:
height:1px;
margin-bottom:-1px;
}

<div id="backlogEpic" class="ui-widget-content">
    <div id="backlogAccordion">  
    <--- accordian code---->   
    </div> 
    <div class='clearer'></div>
</div>

Answer 3

Try this. On create event:

1. count the accordion header --> c
2. calculate the content height : parent's height (#content) - (c * acordion height)
3. set the content (.ui-accordion-content) outer height;

you should be aware about height vs innerheight vs outerheight of jquery

$( "#accordion" ).accordion({
    heightStyle: "fill",
    collapsible:true,
    active:false,
    animate:300,
    create: function( event, ui ) {
        var c=$(".ui-accordion-header").length;
        var h=$("#content").height() - (c* $(".ui-accordion-header").outerHeight(true));
        $(".ui-accordion-content").outerHeight(h);
    }
});