jQuery accordion heighstyle: content or fill not working

Question

What i need is that for only one div in my accordion (device properties) to change the height to the content. I also noticed that if i go to firebug and remove the height property of the device div, that it will receive the good height.

My accordion initiation:

$('#accordion').accordion({heightStyle: 'auto'});

I tried:

$('#accordion').accordion({heightStyle: "fill"}); 
$( "#accordion" ).accordion( "refresh" );

and

$('#accordion').accordion({heightStyle: "content"});
$( "#accordion" ).accordion( "refresh" );

What i need:

Html example (so you have an idea)

<div id="application" style="position:absolute">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h3 id="clickTexts" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" aria-controls="ui-accordion-accordion-panel-5" aria-selected="false" tabindex="-1">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Texts
</h3>
<div id="ui-accordion-accordion-panel-5" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="overflow: auto; display: none; height: 246px;" aria-labelledby="clickTexts" role="tabpanel" aria-expanded="false" aria-hidden="true">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
<input id="texts_ac" class="ui-autocomplete-input" type="text" onclick="this.value='';" autocomplete="off">
</div>
<h3 id="clickDevp" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" aria-controls="device" aria-selected="true" tabindex="0">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
Device properties
</h3>
<div id="device" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="width: 278px; display: block; height: 246px;" aria-labelledby="clickDevp" role="tabpanel" aria-expanded="true" aria-hidden="false">
ID:
<input id="devID" type="text" style="float:right">
<hr>
<p id="devType">Type: BLOK6-097</p>
<hr>
<p>
<hr>
<p>Positions</p>
<div id="posTable">
<table border="1px" style="width:100%">
<tbody>
<tr>
<td>1</td>
<td>NORMAAL</td>
<td>X: Y:</td>
</tr>
<tr>
<td>2</td>
<td>MAX. 110 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>3</td>
<td>MAX. 90 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>4</td>
<td>MAX. 70 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>5</td>
<td>MAX. 50 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>6</td>
<td>PIJL IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>7</td>
<td>PIJL LINKS IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>8</td>
<td>EINDE SNELHEID IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>9</td>
<td>KRUIS IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

因此，显然$（'div＃device'）。css（“ height”，“”）可以解决问题