fix(pager): allow bigger items width for pages with wider content

telerik · Dec 11, 2019 · 17deded · 17deded
1 parent 250cb3b
commit 17deded
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/default/scss/pager/_layout.scss b/packages/default/scss/pager/_layout.scss
@@ -15,7 +15,7 @@
         .k-link,
         .k-state-selected {
             padding: $pager-buttons-padding;
-            width: button-size();
+            min-width: button-size();
             height: button-size();
             box-sizing: border-box;
             display: inline-flex;

diff --git a/tests/visual/pager.html b/tests/visual/pager.html
@@ -48,6 +48,33 @@
             <span class="k-pager-info k-label">1 - 20 of 91 items</span>
         </div>
 
+        <span></span>
+        <div class="k-pager-wrap k-widget k-floatwrap">
+                <a class="k-link k-pager-nav k-pager-first k-state-disabled"><span class="k-icon k-i-arrow-end-left"></span></a>
+                <a class="k-link k-pager-nav k-state-disabled"><span class="k-icon k-i-arrow-60-left"></span></a>
+                <div class="k-pager-numbers-wrap">
+                    <ul class="k-pager-numbers k-reset">
+                        <li class="k-current-page"><span class="k-link k-pager-nav">1</span></li>
+                        <li><span class="k-state-selected">1000</span></li>
+                        <li><a class="k-link">1001</a></li>
+                        <li><a class="k-link">1002</a></li>
+                        <li><a class="k-link k-state-hover">1003</a></li>
+                        <li><a class="k-link">1004</a></li>
+                    </ul>
+                </div>
+                <a class="k-link k-pager-nav"><span class="k-icon k-i-arrow-60-right"></span></a>
+                <a class="k-link k-pager-nav k-pager-last"><span class="k-icon k-i-arrow-end-right"></span></a>
+
+                <span class="k-pager-sizes k-label">
+                    <span class="k-widget k-dropdown k-header"><span class="k-dropdown-wrap k-state-default"><span class="k-input">20</span><span class="k-select"><span class="k-icon k-i-arrow-60-down"></span></span></span></span>
+                    items per page
+                </span>
+
+                <a class="k-pager-refresh k-link"><span class="k-icon k-i-reload"></span></a>
+
+                <span class="k-pager-info k-label">5001 - 5005 of 6000 items</span>
+            </div>
+
         <span>12px</span>
         <div class="k-pager-wrap k-widget k-floatwrap" style="font-size: 12px;">
             <a class="k-link k-pager-nav k-pager-first k-state-disabled"><span class="k-icon k-i-arrow-end-left"></span></a>