En mi interfaz de usuario tengo un acordeón configuración como esta:

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

    //More sections
</div>

El acordeón funciona correctamente cuando está formado por primera vez, y parece que se ajusta bien para el contenido dentro de cada una de las secciones. Sin embargo, si a continuación, añadir más contenido en el acordeón después de la .el acordeón() llame al (a través de ajax), el interior de la sección termina hasta que se desborde.

Ya que el acordeón se está formando con casi ningún contenido, todo el interior de la divs son extremadamente pequeñas, y por lo tanto el contenido desborda y se obtiene acordeones con barras de desplazamiento en el interior, con casi ningún área de visualización.

He intentado agregar min-altura de estilos a la object_list div, y el contenido de los divs en vano. La adición de la min-altura al interior de divs tipo de trabajo, pero en mal estado de la acordeón animaciones, y agregar a la 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?

InformationsquelleAutor KallDrexx | 2010-05-15

10 Comentarios

  1. 34

    Cuando se declara el acordeón de control de div, usted puede poner una altura en el estilo de etiqueta de la div. A continuación, puede establecer la fillSpace: true propiedad a la fuerza el acordeón de control para llenar ese div espacio no importa qué. Esto significa que usted puede ajustar la altura de lo que funciona mejor para usted la página. Entonces, usted puede cambiar la altura del div al agregar el código

    Si quieres el acordeón para cambiar el tamaño del contenido que contiene, como es necesario, puede hacer el siguiente truco publicado en el sitio web de jQuery UI.

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

    Esto significa que cuando usted seleccione un área con una gran cantidad de texto, el acordeón va a calcular.

    • Yo realmente no entiendo por qué autoHeight = false hace que funcione (parece que debería comportarse de forma opuesta), pero funcionó. Saludos!
    • Tengo la misma consulta…¿dónde tengo que escribir la //getter y setter código
    • directamente en la parte de javascript de su acordeón. Usted acaba de obtener la opción/atributo autoHeight y establece que es falso.
    • Esta opción fue en desuso en 1.9 y combinado con el clearStyle y fillSpace opciones. Ahora deberá utilizar la nueva heightStyle opción. Ver mi respuesta para obtener más información.
    • 'heightStyle': 'content' obras. Consulte stackoverflow.com/a/49077271/999943
  2. 67

    autoHeight ya no se utiliza en 1.9, y se retira en 1.10.

    Uso:

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

    auto para el tamaño de su interior div.

    ACTUALIZACIÓN:

    Veo que esto es todavía muy activo post, así que me decidí a hacer seguro de que mi respuesta sigue siendo válida. Parece que esto puede no funcionar en jQuery UI 1.11. Se observa que el [contenido] propiedad ha quedado obsoleta, y utilizar el [panel] en su lugar. Hacer el fragmento de código que ahora parecen algo más parecido a esto:

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

    TODAVÍA NO HE PROBADO ESTA, ACABO DE ENCONTRAR, Y VOLVERÁ A QUITAR ESTE COMENTARIO CUANDO TENGO TIEMPO PARA PROBAR

    • respuesta correcta para las últimas versiones, me pregunto por qué esto no es el comportamiento por defecto…
    • Acabo de empezar a utilizar este plugin y esta opción arregló el problema que estaba teniendo con jqueryUI ajuste de la altura de los contenidos a los más alto del panel. Gracias
    • en la versión 1.11.4 que aún tenía en las definiciones en «opciones»: heightStyle: "content", para fijar la altura estándar de 500px. Gracias!
    • Acabo de utilizar heightStyle: ‘contenido’ y funciona muy bien para las alturas de los paneles se establece en función de su contenido. heightStyle: ‘panel’ funciona igual de bien.
    • Gracias por tu post. He vuelto a revisar la documentación, y panel no existe… Ver mi respuesta a continuación para obtener más detalles. stackoverflow.com/a/49077271/999943
  3. 18

    A partir de la documentación suena como que usted necesitará para establecer

    clearStyle: true

    …y también

    autoHeight: false

    Creo que el uso de clearStyle permite agregar dinámicamente el contenido sin Acordeón en el camino.

    A fin de tratar este…

    $( ".selector" ).accordion({ clearStyle: true, autoHeight: false });
    • este trabajó para mí! 🙂
    • trabajó como un campeón
    • funcionó muy bien. Gracias.
  4. 15

    Parece que todas las respuestas aquí están usando ahora en desuso opciones.

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

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

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

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

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

    Este es preferido como el resize método está ahora en desuso.

    • trabajó para mí. El «heightStyle» atributo es la clave para v1.10+
    • La «actualización» de la solución resuelto mi problema, tal como yo se carga el contenido en el acordeón después de haber sido inicializado.
  5. 4

    Ajuste de la altura del DIV hará el truco.

    $(document).ready(function() {
    
        $("#accordion").show().accordion({
            autoHeight: false
        });
    
        $("#accordion div").css({ 'height': 'auto' });
    });      
  6. 2

    Apagado automático funcionará… (con cualquier cadena, además de auto o de relleno), tal como la solución de decirle a utilizar «panel». Pero…

    Que es el mismo que poner en la basura de cadena para "heightStyle". El "heightStyle" que se busca es la "content".

    (valores de opción "heightStyle" en jQuery UI 1.12)

    • "auto": Todos los paneles será ajustado a la altura de las más altas del panel.
    • "fill": Ampliar la altura disponible basado en el acordeón de padres de altura.
    • "content": Cada panel será sólo tan alto como su contenido.

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

    Espero que ayude.

  7. 1

    En su jquery-ui.js busque la siguiente sección y cambiar heightstyle: "auto" a heightstyle: "content" por lo que el archivo actualizado se parezca a esto.

    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
    },
  8. 0

    Simplemente llame a la acordeones .resize() método, este volverá a calcular su tamaño.
    http://docs.jquery.com/UI/Accordion#method-resize

    • Usted todavía tiene que establecer el fillSpace: true y cambiar el contenedor de la altura para hacer .resize() trabajo.
    • Gracias, esto funcionó para mí, sin embargo, tenía que usar .accordion("resize") en lugar de .resize()
    • Tenga en cuenta que este método fue en desuso en 1.9 y ha sido eliminado en 1.10. Ahora deberá utilizar .accordion("refresh") lugar.
  9. 0

    He creado recientemente un acordeón que se recupera el contenido a través de ajax cuando una pestaña se activa y se topó con el mismo problema. He intentado utilizar algunas de las sugerencias que se publican aquí, pero que nunca creció el panel correctamente hasta que puse el heightStyle a los contenidos.

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

    Estoy usando jQuery-UI versión 1.10.4.

  10. 0

    para mí hacerlo siguiente trabajado con precisión.

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

    });

Dejar respuesta

Please enter your comment!
Please enter your name here