overflow: auto;プロパティのためにドロップダウンが表示されないため、応答がありスクロールがアクティブな場合、テーブル内のドロップダウンボタンに問題があります。これが折りたたまれているときにボタンのドロップダウンオプションを表示するために、どうすれば修正できますか？いくつかのjQueryを使用できますが、左右のスクロールに問題があったため、別の解決策を見つけることにしました。わかりやすくするために写真を添付しました。
スクロールが原因でレスポンシブテーブル内のブートストラップボタンのドロップダウンが表示されない
回答:
私はこれを自分で解決し、同じ問題を抱えている他のユーザーを支援するために答えをスコープに入れました：ブートストラップにイベントがあり、そのイベントを使用して設定できます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: このフィドルの例では奇妙に機能し、理由はわかりませんが、私のプロジェクトでは問題なく機能します。
3
これは、行の最初のセルにドロップダウンがあるテーブルでのみ機能します。
—
Almino Melo 2015
動的にロードされたテーブルの場合：
—
Exlord 2016年
$('body') .on('show.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "visible"); }) .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });
しかし、クリックした後、データは画面の最小サイズの外に出ます。したがって、これは機能しません。!!!!
—
Shreya Shah
これは、ドロップダウンが開いたときにテーブルが左にスクロールして戻るのを防ぐことができれば機能します。ただし、そのままでは、画面の右側にドロップダウンがある場合、テーブルを開くとテーブルが左にピクピクします。右端（
—
ポニーボーイ
.table-responsiveクラスによってマスクされている）のドロップダウンは、編集しようとすると完全に非表示になります。
CSSのみの溶液は、オーバーフローにy軸を可能にすることです。
http://www.bootply.com/YvePJTDzI0
.table-responsive {
overflow-y: visible !important;
}
編集
別のCSSのみの解決策は、ビューポートの幅に基づいてオーバーフローをレスポンシブに適用することです。
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: inherit;
}
}
@ZimSystemはまだ同じことをしますが、これは基本的に解決策ではありません。
—
ジェマージョーンズ2017
このソリューションは、カスタムcssを削除しても機能します。多分それはhtmlのものです。私はまだCSSのみのソリューションを探しています。
—
フェルナンド
いいえ、機能しません。私はデータテーブルを使用しているからだと思います
—
peterchaula 2017年
ボタンがページの下部にあることを除いて、私にとっては機能します...その後、ドロップダウンがウィンドウの外に表示されます...
—
BrucieAlpha19年
参考までに、2018年でBS4.1を使用しています
data-boundary="viewport"ドロップダウンを切り替えるボタン（クラスのあるボタン）に追加してみてくださいdropdown-toggle。https://getbootstrap.com/docs/4.1/components/dropdowns/#optionsを参照してください
これも私が思いついた実用的なソリューションであることを確認します。
—
sdvnksv
以前のバージョンについて話すことはできませんが、Bootstrap4の場合はこれが本当に最良のソリューションです。シンプルで、応答性を犠牲にすることはなく、追加のスタイルやスクリプトでハッキングしようとする代わりに、フレームワークですでに提供されている機能を使用します。
—
T. Linnell 2018年
私は別のアプローチを取りました、私は親から要素を切り離し、jQueryによって絶対位置でそれを設定しました
動作中のJSファイル：http：//jsfiddle.net/s270Lyrd/
私が使用しているJSソリューション。
//fix menu overflow under the responsive table
// hide menu on click... (This is a must because when we open a menu )
$(document).click(function (event) {
//hide all our dropdowns
$('.dropdown-menu[data-parent]').hide();
});
$(document).on('click', '.table-responsive [data-toggle="dropdown"]', function () {
// if the button is inside a modal
if ($('body').hasClass('modal-open')) {
throw new Error("This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element")
return true;
}
$buttonGroup = $(this).parent();
if (!$buttonGroup.attr('data-attachedUl')) {
var ts = +new Date;
$ul = $(this).siblings('ul');
$ul.attr('data-parent', ts);
$buttonGroup.attr('data-attachedUl', ts);
$(window).resize(function () {
$ul.css('display', 'none').data('top');
});
} else {
$ul = $('[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']');
}
if (!$buttonGroup.hasClass('open')) {
$ul.css('display', 'none');
return;
}
dropDownFixPosition($(this).parent(), $ul);
function dropDownFixPosition(button, dropdown) {
var dropDownTop = button.offset().top + button.outerHeight();
dropdown.css('top', dropDownTop + "px");
dropdown.css('left', button.offset().left + "px");
dropdown.css('position', "absolute");
dropdown.css('width', dropdown.width());
dropdown.css('heigt', dropdown.height());
dropdown.css('display', 'block');
dropdown.appendTo('body');
}
});
このソリューションは私にとって素晴らしい働きをしました：
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: visible;
}
}
私の2¢クイックグローバル修正：
// drop down in responsive table
(function () {
$('.table-responsive').on('shown.bs.dropdown', function (e) {
var $table = $(this),
$menu = $(e.target).find('.dropdown-menu'),
tableOffsetHeight = $table.offset().top + $table.height(),
menuOffsetHeight = $menu.offset().top + $menu.outerHeight(true);
if (menuOffsetHeight > tableOffsetHeight)
$table.css("padding-bottom", menuOffsetHeight - tableOffsetHeight);
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$(this).css("padding-bottom", 0);
})
})();
説明：「。table-responsive」内のドロップダウンメニューが表示されると、テーブルの高さを計算し、メニューの表示に必要な高さに一致するように（パディングを使用して）展開します。メニューは任意のサイズにすることができます。
私の場合、これは「.table-responsive」クラスを持つテーブルではなく、ラッピングdivです。
<div class="table-responsive" style="overflow:auto;">
<table class="table table-hover table-bordered table-condensed server-sort">
したがって、スクリプトの$ table varは実際にはdivです！（明確にするために...またはそうではない）:)
注：IDEが関数を折りたたむことができるように、関数でラップします;）しかし、必須ではありません！
これが私のために働いた唯一の解決策ですが、$ table.css（ "padding-bottom"、menuOffsetHeight --tableOffsetHeight + 16）;を使用することをお勧めします。$ table.css（ "padding-bottom"、menuOffsetHeight-tableOffsetHeight）;の挿入図 デフォルトでブートストラップにある余分なパディングに加えて、下部に小さなギャップを追加します。
—
Phil Young
これは機能しますが、パディングによって見栄えが悪くなります。パディングの肥大化なしでそれを機能させる解決策があったらいいのにと思います。
—
カシム2016年
素晴らしくシンプルなソリューション
—
NMC
CSSのみを使用するソリューションがあります。テーブル内のドロップダウンには相対位置を使用してください-レスポンシブ：
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: relative; /* Sometimes needs !important */
}
}
これが最善の解決策です。レスポンシブテーブルのui-selectに使用しています。
—
Sergio Ivanuzzo 2016
私にとっても最善の解決策
—
マウロ
このフィドルは機能しません。それは隠し続けてテーブルの下のドロップダウンを。
—
HelloIT 2018年
@HelloITはcodepen（更新）を試してくださいcodepen.io/leocaseiro/pen/rKxmpz
—
Leo Caseiro
@hellioITに同意しますこのメソッドはペンで機能していないようです
—
MrPaulDriver
これは、Bootstrap v4.1以降でdata-boundary="viewport"（ Bootstrap Dropdowns Docs）を）を
しかし、以前のバージョン（v4.0以下）では、このjavascriptスニペットが完全に機能することがわかりました。小さなテーブルやスクロールテーブルで機能します。
$('.table-responsive').on('shown.bs.dropdown', function (e) {
var t = $(this),
m = $(e.target).find('.dropdown-menu'),
tb = t.offset().top + t.height(),
mb = m.offset().top + m.outerHeight(true),
d = 20; // Space for shadow + scrollbar.
if (t[0].scrollWidth > t.innerWidth()) {
if (mb + d > tb) {
t.css('padding-bottom', ((mb + d) - tb));
}
}
else {
t.css('overflow', 'visible');
}
}).on('hidden.bs.dropdown', function () {
$(this).css({'padding-bottom': '', 'overflow': ''});
});
@Wazimeソリューションを少しクリーンアップしました。一般的なソリューションとして最適です。
$(document).on('shown.bs.dropdown', '.table-responsive', function (e) {
// The .dropdown container
var $container = $(e.target);
// Find the actual .dropdown-menu
var $dropdown = $container.find('.dropdown-menu');
if ($dropdown.length) {
// Save a reference to it, so we can find it after we've attached it to the body
$container.data('dropdown-menu', $dropdown);
} else {
$dropdown = $container.data('dropdown-menu');
}
$dropdown.css('top', ($container.offset().top + $container.outerHeight()) + 'px');
$dropdown.css('left', $container.offset().left + 'px');
$dropdown.css('position', 'absolute');
$dropdown.css('display', 'block');
$dropdown.appendTo('body');
});
$(document).on('hide.bs.dropdown', '.table-responsive', function (e) {
// Hide the dropdown menu bound to this button
$(e.target).data('dropdown-menu').css('display', 'none');
});
推奨および選択されたソリューションは、常に最良のソリューションであるとは限りません。残念ながら、そのソリューションは最近使用されており、状況に基づいてページ上に複数のスクロールバーを作成します。
私の方法は少し異なっていました。
テーブルレスポンシブdivを別のdivに含めました。次に、高さ100％、幅：100％、表示ブロックと位置の絶対値を適用して、高さと幅がページサイズに基づくようにし、オーバーフローを非表示に設定しました。
次に、テーブルのレスポンシブdivに、100％の最小の高さを追加しました
<div class="table_container"
style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
以下の作業例でわかるように、スクロールバーが追加されておらず、おかしな動作もありません。実際には、パーセンテージを使用しているため、画面サイズに関係なく機能するはずです。ただし、これについてはテストしていません。それが何らかの理由で失敗した場合、100％をそれぞれ100vhと100vwに置き換えることができます。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
<table class="table">
<thead>
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>DATA</td>
</tr>
<tr>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li> </ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>DATA</td>
</tr>
</tbody>
</table>
</div>
</div>
ビューの高さを小さくするためのソリューションではありません。下部のドロップダウンリンクは、視界から外れているために到達できなくなります。
—
seika 8518年
受け入れられた回答と@LeoCaseiroの回答に基づいて、私の場合は次のように使用しました。
@media (max-width: 767px) {
.table-responsive{
overflow-x: auto;
overflow-y: auto;
}
}
@media (min-width: 767px) {
.table-responsive{
overflow: inherit !important; /* Sometimes needs !important */
}
}
大画面ではドロップダウンはレスポンシブテーブルの後ろに非表示にならず、小画面では非表示になりますが、モバイルにはスクロールバーがあるので問題ありません。
これが誰かを助けることを願っています。
Burebistarulerの応答は、ios8（iphone4s）では問題なく機能しますが、Androidでは以前は機能していましたが動作しません。ios8（iphone4s）とandoirで動作するものは次のとおりです。
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "min-height", "400px" );
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$('.table-responsive').css( "min-height", "none" );
})
これは他の誰かに役立つかもしれません。DatatablesJSを使用しています。テーブルの現在の高さに500pxを追加します。Datatablesではテーブルで10、20などのページを使用できるため、これを行います。したがって、テーブルの高さを動的に計算する必要があります。
ドロップダウンが表示されたら、高さを追加します。
ドロップダウンが非表示になったら、元のテーブルの高さをリセットします。
$(document).ready(function() {
$('.table-responsive .dropdown').on('shown.bs.dropdown', function () {
console.log($('#table-responsive-cliente').height() + 500)
$("#table-responsive-cliente").css("height",$('#table-responsive-cliente').height() + 500 );
})
$('.table-responsive .dropdown').on('hide.bs.dropdown', function () {
$("#table-responsive-cliente").css("height","auto");
})
})
そしてHTML
<div class="table-responsive" id="table-responsive-cliente">
<table class="table-striped table-hover">
....
....
</table>
</div>
前：
ドロップダウンが表示された後：
ドロップダウンがテーブルの下部に近いときにドロップダウンに.dropupクラスを適用することで、この問題を解決しました。ここに画像の説明を入力してください
最終的には、そのソリューションに最も満足しています。
—
Furgas
$('table tr:nth-last-child(-n+3) td').addClass('dropup')。
人々がまだこの問題に固執していて、私たちがすでに2020年にいる限り。ドロップダウンメニューにフレックスディスプレイを表示することで、純粋なCSSソリューションを取得します
このスニペットはdatatable-scroll-wrapクラスでうまく機能します
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu {
display: flex;
}
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a {
display: flex;
}
さて、一番上の答えを読んで、スクロールバーが表示されていて、トグルボタンが最後の列（私の場合）または他の見えない列にあるときは、実際には機能しないことがわかりました
ただし、「inherit」を「hidden」に変更すると機能します。
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "hidden" );
}).on('hide.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "auto" );
})
そのようにしてみてください。
一度お試しください。ネットで1時間調査した後、私はこの問題の最善の解決策を見つけました。
解決策：-スクリプトを追加するだけです
(function () {
// hold onto the drop down menu
var dropdownMenu;
// and when you show it, move it to the body
$(window).on('show.bs.dropdown', function (e) {
// grab the menu
dropdownMenu = $(e.target).find('.dropdown-menu');
// detach it and append it to the body
$('body').append(dropdownMenu.detach());
// grab the new offset position
var eOffset = $(e.target).offset();
// make sure to place it where it would normally go (this could be improved)
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': eOffset.left
});
});
// and when you hide it, reattach the drop down, and hide it normally
$(window).on('hide.bs.dropdown', function (e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
出力：-
単にこれを使用してください
.table-responsive {
overflow: inherit;
}
Chromeで動作しますが、継承プロパティがサポートされていないため、IE10またはEdgeでは動作しません