web-dev-qa-db-ja.com

jQuery UIアコーディオンの高さを調整するにはどうすればよいですか？

私のUIには、次のようなアコーディオンのセットアップがあります。

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

    // More sections
</div>

アコーディオンは最初に形成されたときに適切に機能し、各セクション内のコンテンツに合わせて調整されているようです。ただし、.accordion（）呼び出しの後に（ajaxを介して）アコーディオンにコンテンツを追加すると、セクションの内部がオーバーフローします。

アコーディオンはほとんどコンテンツなしで形成されているため、すべての内部divは非常に小さいため、コンテンツはオーバーフローし、表示領域がほとんどないスクロールバーでアコーディオンを取得します。

Object-list divにmin-heightスタイルを追加しようとしましたが、コンテンツdivは使用できません。内側のdivにmin-heightを追加するとうまくいきましたが、アコーディオンのアニメーションが台無しになり、object_list divに追加してもまったく何もしませんでした。

コンテンツセクションに十分なコンテンツがない場合でも、コンテンツセクションから適切なサイズを取得するにはどうすればよいですか？

javascriptjqueryjquery-uiaccordion
37
KallDrexx

アコーディオンコントロールdivを宣言するときに、divのスタイルタグに高さを指定できます。次に、fillSpace：trueプロパティを設定して、アコーディオンコントロールがそのdivスペースを何でも強制的に埋めるようにすることができます。つまり、ページに最適な高さに設定できます。その後、コードを追加するときにdivの高さを変更できます

アコーディオンのコンテンツを必要に応じて動的にサイズを変更したい場合は、次のトリックを実行できます jQuery UI Webサイトに投稿 。

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

つまり、テキストの多い領域を選択すると、アコーディオンが再計算します。

34
ICodeForCoffee

autoHeightは 1.9 で非推奨になり、 1.1 で削除されました。

つかいます：

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

内部divのサイズを自動調整するには.

UPDATE：

これはまだ非常に活発な投稿であることがわかりましたので、私の答えがまだ有効であることを確認することにしました。これはjQuery UIでは動作しなくなるようです 1.11 。 [content]プロパティが非推奨になり、代わりに[panel]を使用することに注意してください。コードスニペットを次のように変更します。

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

私はまだこれをテストしていませんが、すぐに見つかり、テストする時間があるときにこのコメントを返して削除します

67
Keerigan

ドキュメントから 設定する必要があるようです

clearStyle: true

...そしてまた

autoHeight: false

ClearStyleを使用すると、アコーディオンが邪魔されることなくコンテンツを動的に追加できると思います。

これを試してみてください...

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

ここでのすべての答えは、廃止されたオプションを使用しているようです。

JQuery UIの最新バージョン（1.10.x）では、意図した効果を得るために、アコーディオンをheightStyle: "fill"で初期化する必要があります。

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

詳細については、jQuery UI APIのドキュメントをご覧ください： http://api.jqueryui.com/accordion/#option-heightStyle

ページのサイズが動的に変化し、アコーディオンのサイズを再計算する必要がある場合、refreshメソッドを使用してアコーディオンを更新する必要があります。

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

resizeメソッドは廃止されるため、これが推奨されます。

15
nullability

DIVの高さを設定すると、うまくいきます。

$(document).ready(function() {

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

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

「パネル」を使用するように指示するソリューションなど、自動をオフにすると...（自動または塗りつぶし以外の任意の文字列で）動作します。しかし...

これは、"heightStyle"のガベージ文字列を入力するのと同じです。お探しの"heightStyle"は"content"です。

（jQuery UI 1.12のオプション"heightStyle"の値）

  • "auto"：すべてのパネルは、最も高いパネルの高さに設定されます。
  • "fill"：アコーディオンの親の高さに基づいて利用可能な高さに拡張します。
  • "content"：各パネルの高さはそのコンテンツと同じです。

例： https://jsfiddle.net/qkxyodpq/5/

お役に立てば幸いです。

2
phyatt

Jquery-ui.jsで次のセクションを検索し、heightstyle: "auto"からheightstyle: "content"したがって、更新されたファイルは次のようになります。

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
},
1
Munish Kumar

最近、タブがアクティブになったときにajaxを介してコンテンツを取得し、同じ問題に遭遇したアコーディオンを設定しました。ここに投稿された提案のいくつかを使用してみましたが、heightStyleをcontentに設定するまで、パネルが適切に大きくなりませんでした。

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

JQuery-UIバージョン1.10.4を使用しています。

0
Robbert

アコーディオン.resize()メソッドを呼び出すだけで、サイズが再計算されます。 http://docs.jquery.com/UI/Accordion#method-resize

0
Sean Kinsey

私にとって、フォローは正確に機能しました。

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

}）;

0
R T