From b36d8ae6cb9dcd2e4183202a747d53706f1c1c8a Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Wed, 17 May 2017 22:03:11 +0200
Subject: Use popper to align dropdown menu instead of using css with important

---
 js/tests/visual/dropdown.html | 48 +++++++++++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 11 deletions(-)

(limited to 'js/tests/visual/dropdown.html')

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>
-- 
cgit v1.2.3