Skip to content

Commit

Permalink
fix(grid): fix grid column menu width
Browse files Browse the repository at this point in the history
  • Loading branch information
@TeyaVes @Juveniel
TeyaVes authored and Juveniel committed May 12, 2023
1 parent 94ea968 commit 2d62d41
Show file tree
Hide file tree
Showing 7 changed files with 23 additions and 10 deletions.
1 change: 1 addition & 0 deletions packages/bootstrap/scss/grid/_variables.scss
View file
Expand Up @@ -259,6 +259,7 @@ $kendo-grid-sticky-hover-bg: k-try-shade( $kendo-grid-bg ) !default;
$kendo-grid-sticky-selected-hover-bg: k-color-shade( $kendo-grid-sticky-selected-bg, .7 ) !default;

$kendo-grid-column-menu-width: 250px !default;
$kendo-grid-column-menu-max-width: 320px !default;

$kendo-grid-filter-menu-check-all-border-bottom-width: 1px !default;

Expand Down
1 change: 1 addition & 0 deletions packages/classic/scss/grid/_variables.scss
View file
Expand Up @@ -265,6 +265,7 @@ $kendo-grid-sticky-hover-bg: $kendo-grid-hover-bg !default;
$kendo-grid-sticky-selected-hover-bg: k-try-shade( $kendo-grid-sticky-selected-bg, 1 ) !default;

$kendo-grid-column-menu-width: 230px !default;
$kendo-grid-column-menu-max-width: 320px !default;

$kendo-grid-filter-menu-check-all-border-bottom-width: 1px !default;

Expand Down
13 changes: 8 additions & 5 deletions packages/default/scss/grid/_layout.scss
View file
Expand Up @@ -524,7 +524,8 @@
}

.k-grid-filter-popup {
min-width: 200px;
min-width: $kendo-grid-column-menu-width;
max-width: $kendo-grid-column-menu-max-width;
}

// Standalone column menu
Expand Down Expand Up @@ -1129,7 +1130,8 @@

// Filter menu
.k-filter-menu-popup {
width: $kendo-grid-column-menu-width;
min-width: $kendo-grid-column-menu-width;
max-width: $kendo-grid-column-menu-max-width;
}
.k-filter-menu {
box-sizing: border-box;
Expand Down Expand Up @@ -1173,7 +1175,8 @@
.k-grid-filter-popup.k-popup {

.k-filter-menu-container {
width: $kendo-grid-column-menu-width;
min-width: $kendo-grid-column-menu-width;
max-width: $kendo-grid-column-menu-max-width;
}
}

Expand Down Expand Up @@ -1223,13 +1226,13 @@
// Column menu
.k-column-menu-popup,
.k-grid-columnmenu-popup {
width: $kendo-grid-column-menu-width;
min-width: $kendo-grid-column-menu-width;
box-sizing: border-box;

&.k-popup {
padding-block: $kendo-grid-column-menu-popup-padding-y;
padding-inline: $kendo-grid-column-menu-popup-padding-x;
max-width: 100%;
max-width: $kendo-grid-column-menu-max-width;
}

.k-actions {
Expand Down
1 change: 1 addition & 0 deletions packages/default/scss/grid/_variables.scss
View file
Expand Up @@ -259,6 +259,7 @@ $kendo-grid-sticky-hover-bg: k-color-darken($kendo-grid-bg, 8%) !default;
$kendo-grid-sticky-selected-hover-bg: k-color-shade($kendo-grid-sticky-selected-bg, .7) !default;

$kendo-grid-column-menu-width: 230px !default;
$kendo-grid-column-menu-max-width: 320px !default;

$kendo-grid-filter-menu-check-all-border-bottom-width: 1px !default;

Expand Down
13 changes: 8 additions & 5 deletions packages/fluent/scss/grid/_layout.scss
View file
Expand Up @@ -518,7 +518,8 @@
}

.k-grid-filter-popup {
min-width: 230px;
min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
}

// Standalone column menu
Expand Down Expand Up @@ -1122,7 +1123,8 @@

// Filter menu
.k-filter-menu-popup {
width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
}
.k-filter-menu {
box-sizing: border-box;
Expand Down Expand Up @@ -1168,7 +1170,8 @@
.k-filter-menu.k-popup,
.k-grid-filter-popup.k-popup {
.k-filter-menu-container {
width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
}
}

Expand Down Expand Up @@ -1218,11 +1221,11 @@
// Column menu
.k-column-menu-popup,
.k-grid-columnmenu-popup {
width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
box-sizing: border-box;

&.k-popup {
max-width: 100%;
max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
}

.k-actions {
Expand Down
3 changes: 3 additions & 0 deletions packages/fluent/scss/grid/_variables.scss
View file
Expand Up @@ -450,6 +450,9 @@ $kendo-filter-menu-container-padding-x: map.get( $kendo-spacing, 3 ) !default;
/// Default width of the grid column menu.
/// @group grid
$kendo-grid-column-menu-width: 230px !default;
/// Max width of the grid column menu.
/// @group grid
$kendo-grid-column-menu-max-width: 320px !default;
/// Spacing of the grid column menu.
/// @group grid
$kendo-grid-column-menu-spacing: map.get( $kendo-spacing, 2 ) !default;
Expand Down
1 change: 1 addition & 0 deletions packages/material/scss/grid/_variables.scss
View file
Expand Up @@ -258,6 +258,7 @@ $kendo-grid-sticky-hover-bg: k-try-shade($kendo-grid-bg, 7%) !default;
$kendo-grid-sticky-selected-hover-bg: k-try-shade($kendo-grid-sticky-selected-bg, .87) !default;

$kendo-grid-column-menu-width: 250px !default;
$kendo-grid-column-menu-max-width: 320px !default;

$kendo-grid-filter-menu-check-all-border-bottom-width: 0 !default;

Expand Down

0 comments on commit 2d62d41

Please sign in to comment.