Skip to content

Commit eaeb200

Browse files
adumesnyadumesny
committed
CSS files now 25% smaller
* break: remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead * optimize: CSS files now even 25% smaller (after being halfed in 8.0.0) by removing `.grid-stack` prefix for anything already gs based, and 3 digit rounding. * grid-stack-12 now inserted (default column) since CSS is more specific now.
1 parent 984e892 commit eaeb200

File tree

6 files changed

+137
-133
lines changed

6 files changed

+137
-133
lines changed

‎README.md

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -245,17 +245,20 @@ For 4-column grid it should be:
245245

246246
and so on.
247247

248-
Better yet, here is a SASS code snippet which can make life much easier (Thanks to @ascendantofrain, [#81](https://github.com/gridstack/gridstack.js/issues/81) and @StefanM98, [#868](https://github.com/gridstack/gridstack.js/issues/868)) and you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
248+
Better yet, here is a SASS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
249249

250250
```sass
251-
.grid-stack > .grid-stack-item {
252-
$gridstack-columns: 12;
251+
$columns: 12;
252+
@function fixed($float) {
253+
@return calc(round($float * 1000) / 1000);
254+
}
255+
.grid-stack-#{$columns} > .grid-stack-item {
253256
254-
min-width: calc(100% / $gridstack-columns);
257+
min-width: fixed(calc(100% / $columns));
255258
256-
@for $i from 0 through $gridstack-columns {
257-
&[gs-w='#{$i}'] { width: (calc(100% / $gridstack-columns)) * $i; }
258-
&[gs-x='#{$i}'] { left: (calc(100% / $gridstack-columns)) * $i; }
259+
@for $i from 1 through $columns - 1 {
260+
&[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
261+
&[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); }
259262
}
260263
}
261264
```
@@ -445,11 +448,12 @@ New addition, no API breakage per say. See release notes about creating sub-grid
445448
446449
## Migrating to v8
447450
448-
Possible breaking change if you use nested grid JSON format, or original Angular wrapper. Also target is now ES2020 (see release notes).
451+
Possible breaking change if you use nested grid JSON format, or original Angular wrapper, or relied on specific CSS paths. Also target is now ES2020 (see release notes).
449452
* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename
450453
* We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was `subGrid` with both types which is error prone)
451454
* `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option
452455
* removed `GridStackOptions.dragInOptions` since `setupDragIn()`has it replaced since 4.0
456+
* remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
453457
454458
# jQuery Application
455459

‎demo/demo.css

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,18 @@ h1 {
4444
background: rgba(0, 255, 0, 0.1);
4545
padding: 25px 0;
4646
height: 100px;
47-
text-align: center;
4847
}
4948
.sidebar .grid-stack-item {
49+
display: inline-block;
50+
position: relative;
5051
width: 120px;
5152
height: 50px;
52-
border: 2px dashed green;
5353
text-align: center;
5454
line-height: 35px;
55-
z-index: 10;
56-
background: rgba(0, 255, 0, 0.1);
57-
cursor: default;
58-
display: inline-block;
5955
}
6056
.sidebar .grid-stack-item .grid-stack-item-content {
61-
background: none;
57+
width: 100%;
58+
height: 100%;
6259
}
6360

6461
/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */

‎doc/CHANGES.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@ Change log
8484

8585
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
8686

87+
## 8.0.2 TBD
88+
* break: remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
89+
* optimize: CSS files now even 25% smaller (after being halfed in 8.0.0) by removing `.grid-stack` prefix for anything already gs based, and 3 digit rounding.
90+
8791
## 8.0.1 (2023-04-29)
8892
* feat: [#2275](https://github.com/gridstack/gridstack.js/issues/2275) `setupDragIn()` now can take an array or elements (in addition to selector string) and optional parent root (for shadow DOM support)
8993
* fix: [#2234](https://github.com/gridstack/gridstack.js/issues/2234) `Utils.getElements('1')` (called by removeWidget() and others) now checks for digit 'selector' (becomes an id).

‎src/gridstack-extra.scss

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,22 @@
22
* default to generate [2-11] columns as 1 (oneColumnMode) and 12 (default) are in the main css
33
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
44
*/
5-
6-
@use "sass:math";
7-
85
$gridstack-columns-start: 2 !default;
96
$gridstack-columns: 11 !default;
107

8+
@function fixed($float) {
9+
@return calc(round($float * 1000) / 1000);
10+
}
11+
1112
@mixin grid-stack-items($columns) {
12-
.grid-stack.grid-stack-#{$columns} {
13+
.grid-stack-#{$columns} {
1314

1415
> .grid-stack-item {
15-
min-width: math.div(100%, $columns);
16+
min-width: fixed(calc(100% / $columns));
1617

17-
@for $i from 1 through $columns {
18-
&[gs-w='#{$i}'] { width: math.div(100%, $columns) * $i; }
19-
&[gs-x='#{$i}'] { left: math.div(100%, $columns) * $i; }
18+
@for $i from 1 through $columns - 1 {
19+
&[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
20+
&[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); }
2021
}
2122
}
2223
}

‎src/gridstack.scss

Lines changed: 107 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -3,137 +3,144 @@
33
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
44
*/
55

6-
@use "sass:math";
7-
8-
$gridstack-columns: 12 !default;
6+
$columns: 12 !default;
97
$animation_speed: .3s !default;
108

9+
@function fixed($float) {
10+
@return calc(round($float * 1000) / 1000);
11+
}
12+
1113
@mixin vendor($property, $value...){
12-
-webkit-#{$property}: $value;
13-
-moz-#{$property}: $value;
14-
-ms-#{$property}: $value;
15-
-o-#{$property}: $value;
14+
// -webkit-#{$property}: $value;
15+
// -moz-#{$property}: $value;
16+
// -ms-#{$property}: $value;
17+
// -o-#{$property}: $value;
1618
#{$property}: $value;
1719
}
1820

19-
:root .grid-stack-item > .ui-resizable-handle { filter: none; }
20-
2121
.grid-stack {
2222
position: relative;
23+
}
2324

24-
&.grid-stack-rtl {
25-
direction: ltr;
26-
> .grid-stack-item {
27-
direction: rtl;
28-
}
25+
.grid-stack-rtl {
26+
direction: ltr;
27+
> .grid-stack-item {
28+
direction: rtl;
2929
}
30+
}
3031

31-
.grid-stack-placeholder > .placeholder-content {
32-
background-color: rgba(0,0,0,0.1);
33-
margin: 0;
34-
position: absolute;
35-
width: auto;
36-
z-index: 0 !important;
37-
text-align: center;
38-
}
32+
.grid-stack-placeholder > .placeholder-content {
33+
background-color: rgba(0,0,0,0.1);
34+
margin: 0;
35+
position: absolute;
36+
width: auto;
37+
z-index: 0 !important;
38+
}
3939

40-
> .grid-stack-item {
41-
min-width: math.div(100%, $gridstack-columns);
42-
position: absolute;
43-
padding: 0;
40+
.grid-stack-item-content {
41+
margin: 0;
42+
position: absolute;
43+
width: auto;
44+
overflow-x: hidden;
45+
overflow-y: auto;
46+
}
4447

45-
> .grid-stack-item-content {
46-
margin: 0;
47-
position: absolute;
48-
width: auto;
49-
overflow-x: hidden;
50-
overflow-y: auto;
51-
}
48+
.grid-stack-item {
49+
position: absolute;
50+
padding: 0;
5251

53-
> .ui-resizable-handle {
54-
position: absolute;
55-
font-size: 0.1px;
56-
display: block;
57-
-ms-touch-action: none;
58-
touch-action: none;
59-
}
52+
> .ui-resizable-handle {
53+
position: absolute;
54+
font-size: 0.1px;
55+
display: block;
56+
-ms-touch-action: none;
57+
touch-action: none;
58+
}
6059

61-
&.ui-resizable-disabled > .ui-resizable-handle,
62-
&.ui-resizable-autohide > .ui-resizable-handle { display: none; }
60+
&.ui-resizable-disabled > .ui-resizable-handle,
61+
&.ui-resizable-autohide > .ui-resizable-handle { display: none; }
6362

64-
> .ui-resizable-ne,
65-
> .ui-resizable-nw,
66-
> .ui-resizable-se,
67-
> .ui-resizable-sw {
68-
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
69-
background-repeat: no-repeat;
70-
background-position: center;
71-
}
63+
> .ui-resizable-ne,
64+
> .ui-resizable-nw,
65+
> .ui-resizable-se,
66+
> .ui-resizable-sw {
67+
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
68+
background-repeat: no-repeat;
69+
background-position: center;
70+
}
7271

73-
> .ui-resizable-ne {
74-
@include vendor(transform, translate(0, 10px) rotate(45deg));
75-
}
76-
> .ui-resizable-sw {
77-
@include vendor(transform, rotate(45deg));
78-
}
72+
> .ui-resizable-ne {
73+
@include vendor(transform, translate(0, 10px) rotate(45deg));
74+
}
75+
> .ui-resizable-sw {
76+
@include vendor(transform, rotate(45deg));
77+
}
7978

80-
> .ui-resizable-nw {
81-
@include vendor(transform, translate(0, 10px) rotate(-45deg));
82-
}
83-
> .ui-resizable-se {
84-
@include vendor(transform, rotate(-45deg));
85-
}
79+
> .ui-resizable-nw {
80+
@include vendor(transform, translate(0, 10px) rotate(-45deg));
81+
}
82+
> .ui-resizable-se {
83+
@include vendor(transform, rotate(-45deg));
84+
}
8685

87-
> .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: 0; }
88-
> .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; }
89-
> .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: 0; }
90-
> .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; }
91-
> .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px;}
92-
> .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: 0; right: 25px; }
93-
> .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px;}
94-
> .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; }
95-
96-
&.ui-draggable-dragging {
97-
&> .ui-resizable-handle {
98-
display: none !important;
99-
}
86+
> .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: 0; }
87+
> .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; }
88+
> .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: 0; }
89+
> .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; }
90+
> .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px;}
91+
> .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: 0; right: 25px; }
92+
> .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px;}
93+
> .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; }
94+
95+
&.ui-draggable-dragging {
96+
&> .ui-resizable-handle {
97+
display: none !important;
10098
}
99+
}
100+
101+
&.ui-draggable-dragging,
102+
&.ui-resizable-resizing {
103+
z-index: 100;
101104

102-
@for $i from 0 through ($gridstack-columns - 1) {
103-
&[gs-x='#{$i}'] { left: math.div(100%, $gridstack-columns) * $i; }
104-
&[gs-w='#{$i + 1}'] { width: math.div(100%, $gridstack-columns) * ($i + 1); }
105+
> .grid-stack-item-content {
106+
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
107+
opacity: 0.8;
105108
}
106109
}
107110

108-
&.grid-stack-1>.grid-stack-item {
109-
min-width: 100%;
111+
&.ui-draggable-dragging {
112+
will-change: left, top;
113+
cursor: move;
110114
}
111115

112-
&.grid-stack-animate,
113-
&.grid-stack-animate .grid-stack-item {
114-
@include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
116+
&.ui-resizable-resizing {
117+
will-change: width, height;
115118
}
119+
}
116120

117-
&.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
118-
&.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
119-
&.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
120-
@include vendor(transition, left 0s, top 0s, height 0s, width 0s);
121-
}
121+
.grid-stack-animate,
122+
.grid-stack-animate .grid-stack-item {
123+
@include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
122124
}
123125

124-
.ui-draggable-dragging,
125-
.ui-resizable-resizing {
126-
z-index: 100;
126+
.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
127+
.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
128+
.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
129+
@include vendor(transition, left 0s, top 0s, height 0s, width 0s);
130+
}
131+
132+
.grid-stack-item[gs-x="0"] {
133+
left: 0%;
134+
}
127135

128-
> .grid-stack-item-content {
129-
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
130-
opacity: 0.8;
136+
.grid-stack-#{$columns} > .grid-stack-item {
137+
min-width: fixed(calc(100% / $columns));
138+
@for $i from 1 through ($columns - 1) {
139+
&[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
140+
&[gs-w='#{$i + 1}'] { width: fixed(calc(100% / $columns) * ($i + 1)); }
131141
}
132142
}
133-
.ui-draggable-dragging {
134-
will-change: left, top;
135-
cursor: move;
143+
144+
.grid-stack-1 > .grid-stack-item {
145+
min-width: 100%;
136146
}
137-
.ui-resizable-resizing {
138-
will-change: width, height;
139-
}

‎src/gridstack.ts

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -270,13 +270,6 @@ export class GridStack {
270270
if (opts.column === 'auto') {
271271
delete opts.column;
272272
}
273-
// 'minWidth' legacy support in 5.1
274-
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
275-
let anyOpts = opts as any;
276-
if (anyOpts.minWidth !== undefined) {
277-
opts.oneColumnSize = opts.oneColumnSize || anyOpts.minWidth;
278-
delete anyOpts.minWidth;
279-
}
280273
// save original setting so we can restore on save
281274
if (opts.alwaysShowResizeHandle !== undefined) {
282275
(opts as InternalGridStackOptions)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
@@ -386,9 +379,7 @@ export class GridStack {
386379
this.setAnimation(this.opts.animate);
387380

388381
this._updateStyles();
389-
if (this.opts.column != 12) {
390-
this.el.classList.add('grid-stack-' + this.opts.column);
391-
}
382+
this.el.classList.add('grid-stack-' + this.opts.column);
392383

393384
// dynamic grids require pausing during drag to detect over to nest vs push
394385
if (this.opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;

0 commit comments

Comments
 (0)