検索
検索

ブートストラップアクションのドロップダウンがテーブルレスポンシブ内で機能しない

Rohit Verma 投稿 Dev
37
ロヒト・バーマ

ブートストラップドロップダウンは、これを内部table-responsiveで使用していてoverflowプロパティがあるため、レスポンシブでもデスクトップでも機能しません。

誰でもそれを解決できますか？

ありがとう

.dropdown-toggle{ cursor:pointer;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
<th>Lastname</th>
<th>Password</th>
<th>Phone</th>
<th>Created By</th>
<th>Registration Date</th>
<th>Action</th>


</tr>
</thead>
<tbody>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>



</tbody>
</table>
</div>
</div>

シラディティヤ

ここに解決策がありますhttps://jsfiddle.net/n2omqzpu/1/

$('a[class="dropdown-toggle"]').click(function(){
	var pos = $(this).closest('td').position();
  var ele = $(this).siblings('ul.dropdown-menu');
 	var width = $(document).width() - 200;

  if( width > pos.left) {
    $(ele).css({
      left: pos.left,
      top: (pos.top + 20)
  });
  } else {
     $(ele).css({
      left: (pos.left - 180),
      top: (pos.top + 20)
     });
  }
});
.dropdown-toggle{ cursor:pointer;}

.dropdown-menu{
  position:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
<th>Lastname</th>
<th>Password</th>
<th>Phone</th>
<th>Created By</th>
<th>Registration Date</th>
<th>Action</th>


</tr>
</thead>
<tbody>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>



</tbody>
</table>
</div>
</div>

dropdown要素の配置には、少しの動的計算が必要です。作りdropdownとして位置FIXEのD。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0
サインイン

関連記事

スクロールのため、レスポンシブテーブル内のブートストラップボタンのドロップダウンが表示されない

ナビゲーションバーのブートストラップドロップダウンが機能しない（角度で）

AngularJsng-クリックがブートストラップドロップダウンで機能しない

アンギュラJS 2 - ブートストラップナビゲーションバードロップダウンが機能していません

レスポンシブナビゲーションバードロップダウン（ブートストラップではない）

ドロップダウンが機能しないレスポンシブナビゲーションバー

フラスコ-ブートストラップナビゲーションバードロップダウンがサブページで機能しない

ブートストラップドロップダウン-FFでトグルが機能しない

Twitterブートストラップ-ナビゲーションバーのドロップダウンアイテムが機能しない

Twitter-ブートストラップナビゲーションバーのドロップダウンが奇妙に動作する（モバイルでは機能しない、デスクトップに表示されない）

ブートストラップ3テーブルレスポンシブが機能しない

javascriptクリックアクションを介して機能しないブートストラップ3ドロップダウン

ブートストラップ3レスポンシブがAndroidInternetExplorerのモバイルで機能しない

IEおよびFirefoxでブートストラップドロップダウンアニメーションが機能しない

ブートストラップナビゲーションバーのドロップダウンが機能しない

ブートストラップドロップダウンが機能しないのはなぜですか？

ブートストラップナビゲーションがレスポンシブモードで機能しない

ブートストラップ3-ナビゲーションバーのドロップダウンが追加のHTMLページで機能しない

ブートストラップレスポンシブコンテナの幅が機能しない

ブートストラップナビゲーションバーのドロップダウンリンクがSafariで機能しない

レスポンシブテーブルがブートストラップで機能しない

ブートストラップの小さなウィンドウのナビゲーションバー ドロップダウンが機能しない

ブートストラップマルチレベルドロップダウンが機能しない

ディスプレイブロックのホバートランジションが機能しない

レスポンシブブートストラップがモバイルインレールプロジェクトで機能しない

ブートストラップドロップダウンでのリンクが機能しない

material-uiブレークポイントダウンが機能しないレスポンシブバックグラウンドビデオの作成

ブートストラップナビゲーションバーのドロップダウンがちらつく/機能しない

ブートストラップレスポンシブテキスト-整列が機能しない

TOP 一覧

  1. 1

    STSでループプロセス「クラスパス通知の送信」のループを停止する方法

  2. 2

    Spring Boot Filter is not getting invoked if remove @component in fitler class

  3. 3

    Python / SciPyのピーク検出アルゴリズム

  4. 4

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか？

  5. 5

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  6. 6

    androidsoongビルドシステムによるネイティブコードカバレッジ

  7. 7

    ZScalerと証明書の問題により、Dockerを使用できません

  8. 8

    VisualStudioコードの特異点/ドッカー画像でPythonインタープリターを使用するにはどうすればよいですか？

  9. 9

    ビュー用にサイズ変更した後の画像の高さと幅を取得する方法

  10. 10

    二次導関数を数値計算するときの大きな誤差

  11. 11

    Ansibleで複数行のシェルスクリプトを実行する方法

  12. 12

    画像変更コードを実行してもボタンの画像が変更されない

  13. 13

    Reactでclsxを使用する方法

  14. 14

    Three.js indexed BufferGeometry vs. InstancedBufferGeometry

  15. 15

    __init__。pyファイルの整理中に循環インポートエラーが発生しました

  16. 16

    PyTesseractを使用した背景色のため、スクリーンショットからテキストを読み取ることができません

  17. 17

    値間の一致を見つける最も簡単な方法は何ですか

  18. 18

    reCAPTCHA-エラーコード：ユーザーの応答を検証するときの「missing-input-response」、「missing-input-secret」（POSTの詳細がない）

  19. 19

    三項演算子良い練習の代わりとしてOptional.ofNullableを使用していますか？

  20. 20

    好き/愛の関係のためのデータベース設計

  21. 21

    エンティティIDを含む@RequestBody属性をSpringの対応するエンティティに変換します

ホットタグ

アーカイブ