Skip to content

Commit

Permalink
fix(column-menu): ensure all child content is 100% wide
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Jan 3, 2022
1 parent f0dfb6a commit fd954fe
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 93 deletions.
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/grid/_variables.scss
View file
Expand Up @@ -134,7 +134,7 @@ $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
$grid-sticky-hovered-bg: try-shade( $grid-bg ) !default;
$grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;

$grid-filter-menu-width: 250px !default;
$grid-column-menu-width: 250px !default;

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

Expand Down
2 changes: 1 addition & 1 deletion packages/classic/scss/grid/_variables.scss
View file
Expand Up @@ -137,7 +137,7 @@ $grid-sticky-selected-alt-bg: $grid-selected-alt-bg !default;
$grid-sticky-hovered-bg: $grid-hovered-bg !default;
$grid-sticky-selected-hovered-bg: $grid-selected-hovered-bg !default;

$grid-filter-menu-width: 230px !default;
$grid-column-menu-width: 230px !default;

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

Expand Down
188 changes: 102 additions & 86 deletions packages/default/scss/grid/_layout.scss
View file
Expand Up @@ -714,14 +714,6 @@
padding: 4px 8px;
}

.k-grid-columnmenu-popup {
width: 230px;

&.k-popup {
padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
}
}

// Filter row
.k-filter-row {
line-height: $form-line-height;
Expand Down Expand Up @@ -1206,79 +1198,92 @@

@include exports( "filtermenu/layout" ) {

.k-filter-menu.k-popup,
.k-grid-filter-popup.k-popup {

.k-filter-menu-container {
width: $grid-filter-menu-width;
}
// Filter menu
.k-filter-menu-popup {
width: $grid-column-menu-width;
}
.k-filter-menu {
box-sizing: border-box;
}
.k-filter-menu-container {
padding: map-get( $spacing, 2 );
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
align-items: stretch;
gap: map-get( $spacing, 2 );

.k-filter-menu.k-popup,
.k-grid-filter-popup.k-popup,
.k-popup .k-filter-menu,
.k-popup .k-grid-filter-popup {
.k-multicheck-wrap {
padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;

.k-item {
padding: $grid-column-menu-list-item-padding-y 0;
}

.k-check-all-wrap {
padding-bottom: ($grid-column-menu-list-item-padding-y * 2);
border-bottom-width: $grid-filter-menu-check-all-border-bottom-width;
border-bottom-style: solid;
}
> * {
width: 100%;
}

.k-filter-help-text {
padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
.k-switch,
.k-filter-and {
width: min-content;
align-self: start;
}

.k-filter-selected-items {
padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
.k-actions {
margin: 0;
padding: 0;
}
}

.k-filter-menu {
$item-spacing: $spacer-y / 2;
$form-padding: $spacer-y;
$form-padding-y: $form-padding - $item-spacing;
// Angular specific
kendo-numeric-filter-menu,
kendo-grid-string-filter-menu,
kendo-grid-date-filter-menu,
kendo-grid-filter-menu-input-wrapper {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
gap: map-get( $spacing, 2 );

.k-filter-menu-container {
box-sizing: border-box;
> * {
width: 100%;
}
}
}
.k-ie .k-filter-menu-container {
> * { margin-top: map-get( $spacing, 2 ); }
> :first-child { margin-top: 0; }

.k-widget,
.k-radio-list,
.k-textbox,
.k-searchbox {
margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
width: calc( 100% - ( 2 * #{$grid-filter-menu-item-spacing-x} ) );
box-sizing: border-box;
display: flex;
// Angular specific
.k-filter-and,
kendo-grid-filter-menu-input-wrapper > * {
margin-top: map-get( $spacing, 2 );
}

.k-widget.k-filter-and {
width: 6em;
kendo-grid-filter-menu-input-wrapper > :first-child {
margin-top: 0;
}
}

.k-widget.k-button-group {
width: auto;
display: inline-flex;
}
.k-filter-menu.k-popup,
.k-grid-filter-popup.k-popup {

.k-switch {
width: $switch-size;
display: inline-flex;
.k-filter-menu-container {
width: $grid-column-menu-width;
}
}

.k-multicheck-wrap {
.k-popup .k-multicheck-wrap {
margin: 0;
padding: 0;
max-height: 300px;
font-size: $list-font-size;
line-height: $list-line-height;
white-space: nowrap;
overflow: auto;
list-style: none;

.k-item,
.k-check-all-wrap {
padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;

> .k-checkbox-label {
line-height: inherit;
display: block;
}
}
}

.k-filter-selected-items {
Expand Down Expand Up @@ -1313,6 +1318,43 @@
}

@include exports("columnmenu/layout") {

// Column menu
.k-column-menu-popup,
.k-grid-columnmenu-popup {
width: $grid-column-menu-width;
box-sizing: border-box;

&.k-popup {
padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
}
.k-popup > & {
width: 100%;
}

.k-actions {
margin: 0;
}

}
.k-column-menu {
box-sizing: border-box;

.k-menu:not(.k-context-menu) {
font-weight: 400;
}

.k-expander {
border: 0;
background: inherit;

.k-columnmenu-item {
display: flex;
align-items: center;
}
}
}

.k-column-list {
padding: 0;
margin: 0;
Expand Down Expand Up @@ -1357,16 +1399,6 @@
overflow: hidden;
}

.k-filter-menu,
.k-column-list-wrapper,
.k-columnmenu-item-content {

.k-actions {
margin-top: ($grid-filter-menu-item-spacing-y / 2);
padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x;
}
}

.k-column-menu-group-header {
padding: $grid-column-menu-group-header-padding-y $grid-column-menu-group-header-padding-x;
display: flex;
Expand All @@ -1385,22 +1417,6 @@
flex: 1 1 auto;
}

.k-column-menu {
.k-menu:not(.k-context-menu) {
font-weight: 400;
}

.k-expander {
border: 0;
background: inherit;

.k-columnmenu-item {
display: flex;
align-items: center;
}
}
}

[dir="rtl"],
.k-rtl {
.k-columnmenu-item > .k-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/grid/_variables.scss
View file
Expand Up @@ -137,7 +137,7 @@ $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
$grid-sticky-hovered-bg: darken($grid-bg, 8%) !default;
$grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;

$grid-filter-menu-width: 230px !default;
$grid-column-menu-width: 230px !default;

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

Expand Down
3 changes: 0 additions & 3 deletions packages/material/scss/grid/_layout.scss
View file
Expand Up @@ -16,9 +16,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
@import "~@progress/kendo-theme-default/scss/grid/_layout.scss";

@include exports ("grid/layout/material") {
$text-field-border-width: 2px;
$text-field-radius: $text-field-border-width + 1px;
$text-field-padding: (2 * $grid-cell-padding-x / 3);

.k-grid {
.k-checkbox-label,
Expand Down
2 changes: 1 addition & 1 deletion packages/material/scss/grid/_variables.scss
View file
Expand Up @@ -135,7 +135,7 @@ $grid-sticky-selected-alt-bg: $grid-sticky-selected-bg !default;
$grid-sticky-hovered-bg: try-shade($grid-bg, 7%) !default;
$grid-sticky-selected-hovered-bg: try-shade($grid-sticky-selected-bg, .87) !default;

$grid-filter-menu-width: 250px !default;
$grid-column-menu-width: 250px !default;

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

Expand Down

0 comments on commit fd954fe

Please sign in to comment.