wrap dropdown examples in container to make them visibles

primer · Sep 5, 2019 · 21798b6 · 21798b6
1 parent 8217df4
commit 21798b6
Showing 1 changed file with 147 additions and 127 deletions.
diff --git a/docs/content/components/dropdown.md b/docs/content/components/dropdown.md
@@ -12,35 +12,39 @@ Dropdowns should be trigged by a `<button>`. **[Each dropdown menu requires a di
 Using a GitHub button:
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 Using a button customized with additional utilities:
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="text-gray p-2 d-inline" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="text-gray p-2 d-inline" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ## Options
@@ -50,135 +54,151 @@ Using a button customized with additional utilities:
 Align the direction of dropdown menus and their arrows with modifier classes.
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-ne
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-ne">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block" style="margin-top: 120px">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-ne
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-ne">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-e
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-e">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-e
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-e">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-se
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-se
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-s
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-s">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-s
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-s">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-sw
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-sw">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-sw
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-sw">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    .dropdown-w
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-w">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-  </ul>
-</details>
+<div style="min-height: 160px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      .dropdown-w
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-w">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ### Dividers
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <ul class="dropdown-menu dropdown-menu-se">
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    <li class="dropdown-divider" role="separator"></li>
-    <li><a class="dropdown-item" href="#url">Another item</a></li>
-    <li><a class="dropdown-item" href="#url">One more</a></li>
-  </ul>
-</details>
+<div style="min-height: 210px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <ul class="dropdown-menu dropdown-menu-se">
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      <li class="dropdown-divider" role="separator"></li>
+      <li><a class="dropdown-item" href="#url">Another item</a></li>
+      <li><a class="dropdown-item" href="#url">One more</a></li>
+    </ul>
+  </details>
+</div>
 ```
 
 ### Headers
 
 ```html live
-<details class="dropdown details-reset details-overlay d-inline-block">
-  <summary class="btn" aria-haspopup="true">
-    Dropdown
-    <div class="dropdown-caret"></div>
-  </summary>
-
-  <div class="dropdown-menu dropdown-menu-se">
-    <div class="dropdown-header">
-      Dropdown header
+<div style="min-height: 170px">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <div class="dropdown-menu dropdown-menu-se">
+      <div class="dropdown-header">
+        Dropdown header
+      </div>
+      <ul>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      </ul>
     </div>
-    <ul>
-      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
-    </ul>
-  </div>
-</details>
+  </details>
+</div>
 ```
 
 ### Dark