fix: ensure consistent width for inputs and pickers when inside toolb…

…ar and other containers
telerik · Dec 29, 2021 · 503e68b · 503e68b
1 parent 971b6ec
commit 503e68b
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 23 deletions.
diff --git a/packages/default/scss/appbar/_layout.scss b/packages/default/scss/appbar/_layout.scss
@@ -50,6 +50,19 @@
             border-width: 0 0 0 1px;
             display: inline-block;
         }
+
+
+        // Appbar child components
+        .k-textbox,
+        .k-combobox,
+        .k-dropdown,
+        .k-searchbox,
+        .k-numerictextbox,
+        .k-datepicker,
+        .k-timepicker,
+        .k-datetimepicker {
+            width: 10em;
+        }
     }
 
     .k-appbar-static {

diff --git a/packages/default/scss/dropdowngrid/_layout.scss b/packages/default/scss/dropdowngrid/_layout.scss
@@ -1,4 +1,5 @@
 @include exports("dropdowngrid/layout") {
+
     .k-dropdowngrid-popup {
         overflow: hidden;
     }

diff --git a/packages/default/scss/editor/_layout.scss b/packages/default/scss/editor/_layout.scss
@@ -153,6 +153,7 @@
     }
 
     // Toolbar
+    .k-editor-toolbar,
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
         flex-shrink: 0;
@@ -304,15 +305,6 @@
         }
     }
 
-    .k-editor-widget .k-colorpicker {}
-
-    .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
-        padding-left: 0;
-
-        .k-select {
-            border-width: 0;
-        }
-    }
 
     // Find and replace dialog
     .k-editor-find-replace {

diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss
@@ -163,10 +163,6 @@
             display: inline-flex;
             width: 100%;
         }
-
-        .k-editor .k-dropdown {
-            width: $input-default-width;
-        }
     }
 
     // Form Buttons Container

diff --git a/packages/default/scss/scheduler/_layout.scss b/packages/default/scss/scheduler/_layout.scss
@@ -1128,7 +1128,7 @@
         .k-widget.k-recur-month,
         .k-widget.k-recur-weekday,
         .k-widget.k-recur-weekday-offset {
-            width: 9em;
+            width: 10em;
         }
 
     }

diff --git a/packages/default/scss/spreadsheet/_layout.scss b/packages/default/scss/spreadsheet/_layout.scss
@@ -97,14 +97,10 @@
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
-        }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+
+        .k-combobox,
+        .k-dropdown {
+            width: 5em;
         }
     }
 

diff --git a/packages/default/scss/toolbar/_layout.scss b/packages/default/scss/toolbar/_layout.scss
@@ -100,12 +100,26 @@
             flex: 1 0 0%;
         }
 
+
         // Template
         .k-toolbar-template {
             align-self: center;
             align-items: center;
         }
 
+
+        // Child components
+        .k-textbox,
+        .k-combobox,
+        .k-dropdown,
+        .k-searchbox,
+        .k-numerictextbox,
+        .k-datepicker,
+        .k-timepicker,
+        .k-datetimepicker {
+            width: 10em;
+        }
+
     }
 
 
@@ -120,6 +134,7 @@
 
     // Angular specific
     kendo-toolbar-renderer {
+        display: inline-block;
         border-color: inherit;
     }
 

diff --git a/packages/material/scss/filter/_variables.scss b/packages/material/scss/filter/_variables.scss
@@ -5,7 +5,7 @@ $filter-padding-y: $filter-padding-x !default;
 $filter-bottom-margin: 2.1em !default;
 $filter-line-size: 1px !default;
 
-$filter-operator-dropdown-width: 19em !default;
+$filter-operator-dropdown-width: 15em !default;
 
 $filter-preview-field-text: $primary !default;
 $filter-preview-operator-text: $subtle-text !default;