¿Cómo se puede ajustar la altura de un acordeón jQuery UI?

Question

En mi interfaz de usuario que tienen una configuración de acordeón como esto:

<div id="object_list"> 
    <h3>Section 1</h3> 
    <div>...content...</div> 

    // More sections 
</div> 

El acordeón funciona correctamente cuando se formó por primera vez, y parece ajustarse bien para el contenido dentro de cada una de las secciones. Sin embargo, si luego agrego más contenido en el acordeón después de la llamada .accordion() (a través de ajax), el interior de la sección termina desbordando.

Dado que el acordeón se está formando casi sin contenido, todos los divs internos son extremadamente pequeños, y por lo tanto el contenido se desborda y se obtiene acordeones con barras de desplazamiento dentro con casi ningún área de visualización.

He intentado agregar estilos min-height a la div object_list, y el contenido divs en vano. Agregar el min-height al divs interno funcionó, pero estropeó las animaciones del acordeón, y al agregarlo al object_list div no hizo absolutamente nada.

¿Cómo puedo obtener un tamaño razonable de las secciones de contenido incluso cuando no hay suficiente contenido para llenar esas secciones?

Answer 1

Cuando declara el div de control de acordeón, puede poner un alto en la etiqueta de estilo para el div. A continuación, puede configurar fillSpace: verdadero propiedad para forzar el control del acordeón para llenar ese espacio div sin importar nada. Esto significa que puede establecer la altura de lo que mejor funcione para su página. A continuación, puede cambiar la altura del div al agregar el código

Si desea que el acordeón cambie el tamaño dinámicamente del contenido que contiene según sea necesario, puede realizar el siguiente truco posted on the jQuery UI website.

//getter 
var autoHeight = $(".selector").accordion("option", "autoHeight"); 
//setter 
$(".selector").accordion("option", "autoHeight", false); 

Esto significa que cuando seleccione un área con mucho texto, el acordeón lo volverá a calcular.

Answer 2

Simplemente llame al método acordeones .resize(), esto recalculará su tamaño. http://docs.jquery.com/UI/Accordion#method-resize

Answer 3

From the docs parece que usted tendrá que establecer

... y también

autoHeight: false 

creo que el uso de clearStyle le permite añadir de forma dinámica contenido sin acordeón en el camino .

Así que trate de esto ...

$(".selector").accordion({ clearStyle: true, autoHeight: false }); 

Answer 4

Parece que todas las respuestas aquí ahora están utilizando las opciones obsoletas.

Con la última versión de jQuery UI (1.10.x), debe inicializar su acordeón con heightStyle: "fill" para obtener el efecto deseado.

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

Usted puede leer más en los documentos de la API jQuery UI aquí: http://api.jqueryui.com/accordion/#option-heightStyle

Si las dimensiones de la página cambian de forma dinámica y hay que volver a calcular el tamaño de su acordeón, debe actualizar su acordeón utilizando el método refresh:

$(".selector").accordion("refresh"); 

Esto se prefiere porque el método resize ahora está en desuso.

Answer 5

autoHeight está en desuso en 1.9, y eliminado en 1.10.

Uso:

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

para auto tamaño de su div interior.

ACTUALIZACIÓN:

veo que esto sigue siendo todo un puesto activo, por lo que decidí asegurarme de que mi respuesta sigue siendo válida. Parece que esto ya no funciona en jQuery UI 1.11. Toma nota de que la propiedad [content] ha quedado en desuso, y de usar [panel] en su lugar. Haciendo que el fragmento de código ahora mira algo más parecido a esto:

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

que aún no hemos comprobado esto, sólo ENCONTRADO, y volverá a eliminar este comentario cuando tengo tiempo para probar

Answer 6

Ajuste de la década de los DIV la altura hará el truco.

$(document).ready(function() { 

    $("#accordion").show().accordion({ 
     autoHeight: false 
    }); 

    $("#accordion div").css({ 'height': 'auto' }); 
});  

Answer 7

Recientemente he creado un acordeón que recupera el contenido a través de AJAX cuando una ficha se activa y se encontró con el mismo problema. Intenté usar algunas de las sugerencias publicadas aquí, pero nunca crecieron el panel correctamente hasta que configuré heightStyle para el contenido.

$("#myaccordion").accordion({ 
    heightStyle: "content", 
    activate: function(event ui) { 
    //use ajax to retrieve content here. 
    } 
}); 

Estoy usando jQuery-UI versión 1.10.4.

Answer 8

para mí haciendo lo siguiente trabajado con precisión.

$("#accordion").accordion({ 
    autoHeight: false, 

});

Answer 9

En su búsqueda jquery-ui.js para la siguiente sección y cambie heightstyle: "auto" a heightstyle: "content" para que el archivo actualizado se vea así.

var accordion = $.widget("ui.accordion", { 
    version: "1.11.4", 
    options: { 
    active: 0, 
    animate: {}, 
    collapsible: false, 
    event: "click", 
    header: "> li > :first-child,> :not(li):even", 
    heightStyle: "content", 
    icons: { 
     activeHeader: "ui-icon-triangle-1-s", 
     header: "ui-icon-triangle-1-e" 
    }, 

    // callbacks 
    activate: null, 
    beforeActivate: null 
}, 

Answer 10

Apagado automático funcionará ... (con cualquier cadena, además de automóviles o de relleno), tales como la solución decirle a utilizar "panel". Pero ...

Eso es lo mismo que poner cualquier cadena de basura para "heightStyle". El "heightStyle" que está buscando es "content".

• http://api.jqueryui.com/accordion/#option-heightStyle
• https://github.com/jquery/jquery-ui/blob/master/tests/unit/accordion/options.js
• https://github.com/jquery/jquery-ui/blob/master/ui/widgets/accordion.js

(valores para la opción "heightStyle" en jQuery UI 1,12)

• "auto": Todos los paneles se ajustará a la altura de los más altos panel.
• "fill": amplía a la altura disponible en función de la altura principal del acordeón.
• "content": Cada panel tendrá la misma altura que su contenido.

Ejemplo: https://jsfiddle.net/qkxyodpq/5/

Espero que ayude.