前提・実現したいこと
bootstrap4のドロップダウンを表示する際に表示されているpdfと重なり、ドロップダウンが隠れます。
chromeではこのようなバグは発生しないのですが、IEで発生します。
【詳細】
ドロップダウンでpdfを表示した後、再度ドロップダウンで選択しようとした際にドロップダウンが表示されたpdfの下側にいきます。
該当のソースコード
html5
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Bootstrap4</title> 6 7 <!-- viewport meta --> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <link rel="stylesheet" href="css/bootstrap.min.css"> 12 <script src="js/jquery-3.4.1.min.js"></script> 13 </head> 14 15 <body> 16 <header> 17 <div class="container"> 18 <div class="jumbotron"> 19 <h1>page</h1> 20 </div> 21 </div> 22 </header> 23 24 <div id="main" class="container"> 25 <div class="row"> <!-- ナビ --> 26 <div class="col-sm-3"> 27 <ul class="nav nav-pills nav flex-column sticky-top"> 28 <li class="nav-item dropdown dropright"> 29 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">申請</a> 30 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 31 <a class="dropdown-item" href="#tab-1-1"data-toggle="tab" >hoge</a> 32 <a class="dropdown-item" href="#">bar</a> 33 </div> 34 </li> 35 <li class="nav-item dropdown dropright"> 36 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">マニュアル</a> 37 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 38 <a class="dropdown-item" href="#tab-2-1"data-toggle="tab" >baz</a> 39 </div> 40 </li> 41 </ul> 42 </div> 43 <!-- 残り9列はコンテンツ表示部分として使う --> 44 <div class="col-sm-9"> 45 <div class="tab-content"> 46 <div id="tab-1-1" class="tab-pane fade"> 47 <object data="hoge.pdf" type="application/pdf"width="900" height="700" ></object> 48 </div> 49 <div id="tab-2-1" class="tab-pane fade"> 50 <object data="baz.pdf" type="application/pdf"width="900" height="700" ></object> 51 </div> 52 </div> 53 </div> 54 </div> 55 </div> 56 57 <script src="js/jquery-3.4.1.min.js"></script> 58 <script src="js/popper.min.js"></script> 59 <script src="js/bootstrap.min.js"></script> 60 61 </body> 62</html>
補足情報(FW/ツールのバージョンなど)
IE11/jquery3.4.1/bootstrap4
回答1件
あなたの回答
tips
プレビュー