Como você pode ajustar a altura de um acordeão de UI do jQuery?

Na minha interface do usuário eu tenho uma configuração de acordeão como esta:

Section 1

...content...
// More sections

O acordeão funciona corretamente quando é formado pela primeira vez e parece ajustar-se bem ao conteúdo dentro de cada uma das seções. No entanto, se eu adicionar mais conteúdo ao acordeão após a chamada .accordion () (via ajax), o interior da seção terminará transbordando.

Como o acordeão está sendo formado com quase nenhum conteúdo, todos os divs internos são extremamente pequenos e, portanto, o conteúdo transborda e você recebe acordeões com barras de rolagem dentro de quase nenhuma área de visualização.

Eu tentei adicionar estilos min-height ao object_list div, e o conteúdo divs sem sucesso. Adicionando o min-height ao tipo de divs interno funcionou, mas isso atrapalhou as animações do acordeão e adicionando-o ao object_list div não fez absolutamente nada.

Como posso obter um tamanho razoável das seções de conteúdo mesmo quando não há conteúdo suficiente para preencher essas seções?

Quando você declara o div de controle de acordeão, você pode colocar uma altura na tag de estilo para o div. Em seguida, você pode definir a propriedade fillSpace: true para forçar o controle do acordeão a preencher esse espaço div independentemente de qual seja. Isso significa que você pode definir a altura para o que funciona melhor para a sua página. Você pode então alterar a altura da div quando adicionar seu código

Se você quiser que o acordeão seja redimensionado dinamicamente para o conteúdo que ele contém, conforme necessário, você pode fazer o seguinte truque postado no site da jQuery UI .

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

Isso significa que quando você seleciona uma área com muito texto, o acordeão a recalcula.

autoHeight foi descontinuado em 1.9 e removido em 1.10 .

Usar:

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

para dimensionar automaticamente sua div interna.

ATUALIZAR:

Eu vejo que este ainda é um post bastante ativo, então decidi me certificar de que minha resposta ainda é válida. Parece que isso pode não funcionar mais na jQuery UI 1.11 . Ele observa que a propriedade [content] foi preterida e usar [panel] em seu lugar. Fazendo o trecho de código agora algo parecido com isto:

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

Eu ainda não testei isto, apenas encontrei, e retornarei e removerei este comentário quando eu tiver tempo para testar

Dos documentos , parece que você precisa definir

 clearStyle: true 

…e também

 autoHeight: false 

Acredito que o uso do clearStyle permite que você adicione dinamicamente conteúdo sem que o Accordion atrapalhe.

Então tente isso …

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

Parece que todas as respostas aqui estão usando opções obsoletas.

Com a versão mais recente do jQuery UI (1.10.x), você deve inicializar o seu acordeão com heightStyle: "fill" para obter o efeito pretendido.

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

Você pode ler mais nos documentos da API de UI do jQuery aqui: http://api.jqueryui.com/accordion/#option-heightStyle

Se as dimensões da página mudarem dinamicamente e você precisar recalcular o tamanho do seu acordeão, atualize o acordeão usando o método de refresh :

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

Isso é preferido, pois o método de resize agora está obsoleto.

Definir a altura do DIV fará o truque.

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

Em seu jquery-ui.js, procure a seção a seguir e altere heightstyle: "auto" para heightstyle: "content" para que o arquivo atualizado seja parecido com este.

 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 }, 

Desligar o auto irá funcionar … (com qualquer string além de auto ou preenchimento), como a solução dizendo para usar “painel”. Mas…

Isso é o mesmo que colocar em qualquer string de lixo para "heightStyle" . O "heightStyle" você está procurando é "content" .

(valores para a opção "heightStyle" no jQuery UI 1.12)

  • "auto" : Todos os painéis serão configurados para a altura do painel mais alto.
  • "fill" : Expanda até a altura disponível com base na altura do pai do acordeão.
  • "content" : cada painel será tão alto quanto seu conteúdo.

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

Espero que ajude.

Basta chamar o método accordions .resize() , isso irá recalcular seu tamanho. http://docs.jquery.com/UI/Accordion#method-resize

Eu recentemente configurei um acordeão que recupera o conteúdo via ajax quando uma aba é ativada e se depara com o mesmo problema. Eu tentei usar algumas das sugestões postadas aqui, mas elas nunca aumentaram o painel corretamente até eu definir o heightStyle para o conteúdo.

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

Estou usando o jQuery-UI versão 1.10.4.

para mim, fazer o seguinte funcionou com precisão.

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

});