jquery-ui - accordion jquery ejemplos

Acordeón de jQuery UI con autoHeight=true tiene barra de desplazamiento innecesaria en paneles no predeterminados

Question

Estoy teniendo problemas con el acordeón jQuery. Cuando creo un panel de contenido donde el panel no predeterminado tiene más contenido que el panel predeterminado, y autoHeight es verdadero, esto proporciona buenas animaciones cuando se cambian los paneles, pero el panel no predeterminado obtiene una barra de desplazamiento que no quiero.

Puedes ver esto en acción yendo a http://jqueryui.com/themeroller/ , cambiando a un tema como "Blitzer" o "Humanidad", y luego abriendo la Sección 3 del ejemplo de acordeón. Me sucede con Safari 3.2.1 y Firefox 3.0.8.

Si cambia a autoHeight = false, entonces esto no sucede y todos los paneles de contenido tienen la altura correcta, pero el panel de contenido solo se muestra al final de la animación y tiene un aspecto extraño, así que tuve que desactivar las animaciones para evitar esta extrañeza .

O estoy malinterpretando algo, o este es un error en el acordeón jQuery UI. Por favor, ayúdame a averiguar cuál de los dos es (o tal vez ambos).

Answer 1

Compruebe si el relleno para el contenido de ui acordeón está siendo anulado.

Experimenté el mismo problema cuando puse lo siguiente en mi CSS:

.container .ui-widget-content {
    padding-right: 3%;
}

Lo cambié como se muestra a continuación y las barras de desplazamiento ya no estaban.

.container .ui-widget-content:not(.ui-accordion-content) {
    padding-right: 3%;
}

No tengo la altura automática activada tampoco.

Answer 2

El uso de esta opción combinada funciona para mí, 1. versión actual de jquery / ui

$( ''#x'' ).accordion({
    autoHeight: false,
    clearStyle: true
});     

Answer 3

Enfrenté un problema similar, para mí el siguiente cambio en CSS funcionó.

.ui-accordion .ui-accordion-content{
overflow:visible !important;
}

Answer 4

Esto funciona para mí:

.ui-accordion-content-active, .ui-accordion-header-active{
    display: block;
}

Answer 5

Hoy en día (con jQuery UI - v1.8), solo con autoHeight es suficiente, ya no aparecen más barras de desplazamiento.

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

Answer 6

Lo intenté

.ui-accordion .ui-accordion-content{ overflow:visible !important; }

pero vi algunos artefactos visuales con la primera pestaña. Así que arreglé el problema de esta manera:

<script type="text/javascript">
    (function() {
        var fixScroll = function(event, ui) {
            $(event.target).find(''.ui-accordion-content-active'').css(''overflow'', ''visible'');
         }
        $(''#tabs'').accordion({ 
            header: "h2",
            create: fixScroll,
            change: fixScroll
        });
    })();
</script>

Answer 7

Lo obtuve del enlace http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion mencionado anteriormente. Fue uno de los comentarios en el artículo. Se deshace de la barra de desplazamiento pero también mantiene el resto del formato divs. Las respuestas anteriores pueden hacer que el contenido fluya a través de las fronteras como me sucedía a mí.

.ui-accordion .ui-accordion-content{
height:auto!important;
}

Answer 8

Probé varias cosas diferentes. autoHeight: falso por sí mismo no funcionó. Esto es lo que finalmente funcionó para mí:

$( "#accordion" ).accordion({
            heightStyle: "content",
            autoHeight: false,
        clearStyle: true,   
        });

Estoy usando esto en un webpart del editor de contenido de SharePoint con un ancho fijo, que se agrega al problema de la altura cuando se agrega contenido al widget de acordeón.

Answer 9

Sé que esto es viejo, pero estaba teniendo este problema y aterricé aquí. Aquí encontrará una solución que no rompe su animación y se deshace de la animación:

http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/

Para aquellos pocos perezosos que no quieren hacer clic, la respuesta corta es:

.ui-accordion .ui-accordion-content { overflow:hidden !important; }

en el acordeón CSS

Answer 10

Tener heightStyle: "content" ayudó a resolver mi problema. Referencia: Accordion

Answer 11

prueba esto

http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion