1

私は自分のサイトで jQuery-UI タブを垂直に使用していますが、タブ パネルにコンテンツをロードし始めるまで問題はありませんでしたが、親タブ パネルの div がコンテンツと共に大きくならないことがわかりました (例: タブ "Static Info")。親 div クラス CSS をoverflow: autoに設定することで問題を「修正」できます。これにより、親 div に垂直スクロールバーが作成されます。ただし、親 div が子コンテンツとともに成長するだけであれば、私は本当に好きです。次のようないくつかのclearfixオプションを試しました。

$( ".tabs" ).tabs().addClass( "ui-helper-clearfix" );

ドキュメントを初期化するとき、しかし clearfixes のいずれも違いはありませんでした。解決策を探していたので、heightStyle とタブの更新を調整して、どちらかが違いを生むかどうかを確認しました。私が見つけたのは、これは何もしなかったということです：

$( ".tabs" ).tabs({ heightStyle: "fill" }); 「コンテンツ」と「自動」も試しましたが、うまくいきませんでした。

ただし、api.jquery.com/tabs に記載されている代替方法を試したところ、次のようになりました。

var heightStyle = $( ".tabs" ).tabs( "option", "heightStyle" );

$( ".selector" ).tabs( "option", "heightStyle", "fill" );

タブのレイアウトが完全に壊れました。コンテンツはすべてそこにありましたが、ul リストはタブのないページの上部にあり、その後にすべてのパネル コンテンツが続きました。私は同じ結果を得ました：

$( ".tabs" ).tabs( refresh );

一般的にjQuery UIが機能していることを確認しました（たとえば、試しました

$( ".tabs" ).tabs({ event: "mouseover" }); which worked fine.

これは単純なように思えますが、CSS で相対的に行き止まりに達しました。jQuery で何が起こっているのか理解できません。heightStyle と refresh で壊れる理由です。私のコンテンツがそれ自体で動作するようにするためのアイデアやアドバイスは大歓迎です...ありがとう！

4

1 に答える 1

2

以下から調整します。

#tabs-left > div {
    height: 35em;
}

に：

#tabs-left > div {
    min-height: 35em;
}
于 2013-03-11T08:55:42.540 に答える