diff options
| author | Johann-S <[email protected]> | 2017-05-17 22:03:11 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-05-17 22:03:11 +0200 |
| commit | b36d8ae6cb9dcd2e4183202a747d53706f1c1c8a (patch) | |
| tree | 1da6f68097ce5d217d2eeb789d4390b7c4d4f894 /js/tests | |
| parent | be742b0f5cde4478402a5a11853cea35ded812ac (diff) | |
| download | bootstrap-b36d8ae6cb9dcd2e4183202a747d53706f1c1c8a.tar.xz bootstrap-b36d8ae6cb9dcd2e4183202a747d53706f1c1c8a.zip | |
Use popper to align dropdown menu instead of using css with important
Diffstat (limited to 'js/tests')
| -rw-r--r-- | js/tests/visual/dropdown.html | 48 |
1 files changed, 37 insertions, 11 deletions
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 45c5d5172..166cbf725 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -59,19 +59,45 @@ </li> </ul> - <!-- Default dropup button --> - <div class="btn-group dropup" style="margin-top: 60px;"> - <button type="button" class="btn btn-secondary">Dropup</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> + <div class="row"> + <div class="col-sm-12 mt-4"> + <!-- Default dropup button --> + <div class="btn-group dropup"> + <button type="button" class="btn btn-secondary">Dropup</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <span class="sr-only">Toggle Dropdown</span> + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </div> + + <div class="btn-group"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + This dropdown's menu is right-aligned + </button> + <div class="dropdown-menu dropdown-menu-right"> + <button class="dropdown-item" type="button">Action</button> + <button class="dropdown-item" type="button">Another action</button> + <button class="dropdown-item" type="button">Something else here</button> + </div> + </div> + + <div class="btn-group"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + This dropdown's menu is left-aligned + </button> + <div class="dropdown-menu dropdown-menu-left"> + <button class="dropdown-item" type="button">Action</button> + <button class="dropdown-item" type="button">Another action</button> + <button class="dropdown-item" type="button">Something else here</button> + </div> + </div> + </div> </div> </div> - </div> <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script> <script src="../../../docs/assets/js/vendor/popper.min.js"></script> |