fix(calendar): adjust calendar width for blazor suite

telerik · Sep 16, 2019 · 9e28dfb · 9e28dfb
1 parent 95e7ffc
commit 9e28dfb
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -901,6 +901,8 @@ $calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
 $calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
 $calendar-header-border-width: 1px !default;
 
+$calendar-header-min-width: 280px !default;
+
 $calendar-content-padding-x: $calendar-header-padding-x !default;
 $calendar-content-padding-y: $calendar-header-padding-y !default;
 

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -886,6 +886,8 @@ $calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
 $calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
 $calendar-header-border-width: 1px !default;
 
+$calendar-header-min-width: 280px !default;
+
 $calendar-content-padding-x: $calendar-header-padding-x !default;
 $calendar-content-padding-y: $calendar-header-padding-y !default;
 

diff --git a/packages/default/scss/calendar/_layout.scss b/packages/default/scss/calendar/_layout.scss
@@ -119,6 +119,9 @@
             .k-button { @extend .k-button-flat; }
         }
 
+        > .k-calendar-header {
+            min-width: $calendar-header-min-width;
+        }
 
         // Footer
         .k-footer,
@@ -144,6 +147,7 @@
             position: relative;
             z-index: 1;
             overflow: hidden;
+            margin: auto;
         }
         &.k-week-number .k-calendar-view {
             width: (8 * $calendar-cell-size);

diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -978,6 +978,8 @@ $calendar-header-padding-x-sm: 0 !default;
 $calendar-header-padding-y-sm: $calendar-header-padding-y !default;
 $calendar-header-border-width: 0 !default;
 
+$calendar-header-min-width: 300px !default;
+
 $calendar-content-padding-x: $calendar-header-padding-x !default;
 $calendar-content-padding-y: $calendar-header-padding-y !default;