add overflow auto test to utility component

uikit · Sep 11, 2018 · b8709a5 · b8709a5
1 parent a0d0320
commit b8709a5
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 2 deletions.
diff --git a/tests/height.html b/tests/height.html
@@ -85,13 +85,13 @@ <h2>JavaScript Options</h2>
                     <tr>
                         <td><code>target</code></td>
                         <td>CSS selector</td>
-                        <td>> *</td>
+                        <td><code>> *</code></td>
                         <td>Elements that should match. By default the children will match.</td>
                     </tr>
                     <tr>
                         <td><code>row</code></td>
                         <td>Boolean</td>
-                        <td>true</td>
+                        <td><code>true</code></td>
                         <td>By default only items in the same row will be matched. For example, once grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.</td>
                     </tr>
                 </tbody>

diff --git a/tests/utility.html b/tests/utility.html
@@ -156,6 +156,80 @@ <h2>Pre scrollable</h2>
                 </div>
             </div>
 
+            <h2>Overflow Auto JS</h2>
+
+            <div class="uk-child-width-1-2@m" uk-grid>
+                <div>
+
+                    <div class="uk-height-medium">
+                        <div class="js-wrapper">
+
+                            <p>Some content before the overflow auto container.</p>
+
+                            <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
+                                <div class="uk-grid-small" uk-grid>
+                                    <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
+                                </div>
+                            </div>
+
+                            <p>Some content after the overflow auto container.</p>
+
+                        </div>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-height-medium">
+                        <div class="js-wrapper">
+
+                            <p>Some content before the overflow auto container.</p>
+
+                            <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
+                                <div class="uk-grid-small" uk-grid>
+                                    <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/photo.jpg" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/photo2.jpg" alt=""></div>
+                                </div>
+                            </div>
+
+                            <p>Some content after the overflow auto container.</p>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <h3>JavaScript Options</h3>
+
+            <table class="uk-table uk-table-striped">
+                <thead>
+                    <tr>
+                        <th>Option</th>
+                        <th>Value</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>selContainer</code></td>
+                        <td>CSS selector</td>
+                        <td><code>.uk-modal</code></td>
+                        <td>The container element which provides the height.</td>
+                    </tr>
+                    <tr>
+                        <td><code>selContent</code></td>
+                        <td>CSS selector</td>
+                        <td><code>.uk-modal-dialog</code></td>
+                        <td>The element which wraps the inner content to provide its height.</td>
+                    </tr>
+                </tbody>
+            </table>
+
             <h2>Responsive Objects</h2>
 
             <div class="uk-child-width-1-3@s" uk-grid>