web-dev-qa-db-ja.com

autoHeight = trueのjQuery UIアコーディオンには、デフォルト以外のペインに不要なスクロールバーがあります

JQueryアコーディオンに問題があります。デフォルト以外のペインにデフォルトのペインよりも多くのコンテンツがあり、autoHeightがtrueであるコンテンツペインを作成すると、ペインを切り替えるときに素敵なアニメーションが提供されますが、デフォルト以外のペインには不要なスクロールバーが表示されます。

http://jqueryui.com/themeroller/ に移動し、「Blitzer」や「Humanity」などのテーマに切り替えてから、サンプルアコーディオンのセクション3を開くと、実際の動作を確認できます。 Safari 3.2.1とFirefox 3.0.8で私に起こります。

AutoHeight = falseに切り替えると、これは発生せず、すべてのコンテンツペインは正しい高さになりますが、コンテンツペインはアニメーションの最後にのみレンダリングされて奇妙に見えるため、アニメーションをオフにしてこの奇妙さを回避する必要がありました。 。

私は何かを誤解しているか、これはjQuery UIアコーディオンのバグです。 2つのうちどちらか（または両方とも）がわかるようにしてください。

jquery-uiaccordion
22
Jaanus

いろいろ試してみました。 autoHeight：false自体は機能しませんでした。これは最終的に私のために働いたものです：

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

これを固定幅のSharePointコンテンツエディターWebパーツで使用しています。これにより、アコーディオンウィジェットにコンテンツを追加するときに高さの問題が発生します。

53
user2170518

このコンボオプションの使用は私にとっては機能します。1。jquery/uiの現在のバージョン

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

同様の問題に直面しましたが、CSSの次の変更が機能しました。

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

現在（jQuery UI-v1.8を使用）、autoHeightで十分で、スクロールバーは表示されません。

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

heightStyle: "content"問題の解決に役立ちました。参照： アコーディオン

8
Abhishek

私はこれが古いことを知っていますが、私はこの問題を抱えていてここに上陸しました。アニメーションを壊さずにアニメーションを削除するソリューションは、次の場所にあります。

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

クリックしたくない怠惰な数人にとって、短い答えは次のとおりです。

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

アコーディオンのCSS

6
noah

これを試して

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

4
objects

これは、上記の http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion リンクから取得しました。それは記事の下のコメントの一つでした。スクロールバーを取り除きますが、残りのdivのフォーマットも保持します。上記の回答により、コンテンツが国境を越えて流れる可能性があります。

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

これは私にとってはうまくいきます：

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

私は試した

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

しかし、最初のタブでいくつかの視覚的なアーティファクトを見ました。だから私はこの方法で問題を修正しました：

<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>
1
Dmitriy Eroshenko

Ui-accordion-contentのパディングがオーバーライドされているかどうかを確認します。

私がCSSに以下を入れたときに同じ問題が発生しました：

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

以下のように変更して、スクロールバーが無くなりました！

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

自動高さもオンにしていません。

0
Tabrez