JQUERY UI Accordion ¿Cambia el tamaño del tamaño de la ventana?

Question

estoy usando el módulo de interfaz de usuario jQuery acordeón:

<script type="text/javascript"> 
$(function() { 
    $("#sidebar_column_accordion").accordion({ 
     fillSpace: true, 
     icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } 
    }); 
}); 
</script> 

Mediante el uso de la opción fillSpace, el acordeón ocupa toda la altura de la ventana que yo quiero. Problema es calcular la altura en la carga de la página, y si el usuario cambia el tamaño de su navegador, no ajusta ...

¿Hay alguna manera de que el acordeón recalcule la altura/tamaño cuando se cambia el tamaño de la ventana del navegador?

Gracias

Answer 1

$(window).resize(function(){ 
    $("#sidebar_column_accordion").accordion("resize"); 
}); 

En jQuery UI 1.9 se eliminó el método de cambio de tamaño. Se agregó el método de actualización que es más robusto y también funcionará en este caso.

$(window).resize(function(){ 
    $("#sidebar_column_accordion").accordion("refresh"); 
}); 

Answer 2

Parece que este ha sido actualizado para "refrescar"

$(function() { 
$("#accordion").accordion({ 
heightStyle: "fill" 
}); 
}); 
$(function() { 
$("#accordion-resizer").resizable({ 
minHeight: 140, 
minWidth: 200, 
resize: function() { 
$("#accordion").accordion("refresh"); 
} 
}); 
}); 

Answer 3

Conjunto autoHeight: 'contenido' en el decalaration acordeón. Esto hará que el div utilizar la altura nativo del contenido:

$('#accordion').accordion({ 
    autoHeight: 'content' 
}); 

Consulte aquí para obtener más información: http://jqueryui.com/accordion/#no-auto-height

Answer 4

Las otras soluciones publicadas no funcionó para mí, a pesar de que estaban cerca.

definir su acordeón usando heightStyle: llenar, así:

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

crear una función para calcular y ajustar la altura. Tenga en cuenta que tuve que hacer ambas cosas, establecer la altura y luego llamar a refresh en el acordeón. Uno no funcionará sin el otro.

function calculateHeight(){ 
    var height = $('#maincontent').height(); // Or whatever height you want 
    $('#sidebar_column_accordion').height(height); 
    $('#sidebar_column_accordion').accordion("refresh"); 
} 

Llamar a esta función tanto en carga de página como en cambio de tamaño de ventana.

calculateHeight(); 

$(window).resize(function() { 
    calculateHeight(); 
});