1. ホーム
  2. javascript

[解決済み] レスポンシブテーブル内のBootstrapボタンのドロップダウンがスクロールのため表示されない

2022-12-15 04:03:59

質問

テーブル内のドロップダウンボタンがレスポンシブでスクロールが有効な場合、以下の理由でドロップダウンが表示されないという問題があります。 overflow: auto; プロパティのためにドロップダウンが表示されないからです。これが折りたたまれたときにボタンのドロップダウンオプションを表示するには、どのようにそれを修正することができますか?私はいくつかのjQueryを使用することができますが、私は左から右へのスクロールの問題を持っているので、私は別の解決策を見つけることにしました後。 私はよりよく理解するために写真を添付しています。 <イグ

以下は小さなjsのフィドルです。

どのように解決するのですか?

私は自分自身でこれを解決し、私は同じ問題を持っている他のユーザーを助けるためにスコープに答えを置く:我々は、ブートストラップでイベントを持っており、我々は設定するために、そのイベントを使用することができます。 overflow: inherit を設定することができますが、これは親コンテナでcssプロパティを持っていない場合に動作します。

$('.table-responsive').on('show.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "auto" );
})

そしてこれがバイオリン

info: このフィドル例では奇妙な動作をしますが、なぜか私のプロジェクトではうまく動作します。