fix(pivotgrid): buttons misalignments

telerik · Sep 30, 2020 · ea4a447 · ea4a447
1 parent ab99cbe
commit ea4a447
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/default/scss/pivotgrid/_layout.scss b/packages/default/scss/pivotgrid/_layout.scss
@@ -25,14 +25,18 @@
         @include use-background-clip();
         @include border-radius( $border-radius );
         padding: $button-padding-y $button-padding-x;
-        padding-right: calc( #{$button-padding-x * 2} + #{$icon-size * 2} );
+        padding-right: calc( #{$button-padding-x} + #{$icon-size * 3} );
         min-height: auto;
         font-size: $font-size;
         line-height: $button-line-height;
         text-align: left;
         position: relative;
         cursor: move;
         white-space: normal;
+
+        .k-field-actions .k-setting-delete {
+            box-sizing: content-box;
+        }
     }
 
     .k-settings-rows .k-button,

diff --git a/tests/visual/pivotconfigurator.html b/tests/visual/pivotconfigurator.html
@@ -54,8 +54,9 @@
                         <div class="k-list-container k-reset">
                             <ul class="k-pivot-configurator-settings k-list k-reset k-pivot-setting">
                                 <li class="k-item k-header">
-                                    Column 1
+                                    Column 1 Long text test
                                     <span class="k-field-actions">
+                                        <span class="k-icon k-i-sort-asc-sm"></span>
                                         <span class="k-icon k-i-more-vertical k-setting-fieldmenu"></span>
                                         <span class="k-icon k-i-close k-setting-delete"></span>
                                     </span>