Skip to content

Commit 669c670

Browse files
authored
Merge pull request #2315 from adumesny/master
fix gs-h|x="1"
2 parents 7a56e8f + 9178fe5 commit 669c670

File tree

8 files changed

+157
-156
lines changed

8 files changed

+157
-156
lines changed

README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -222,14 +222,14 @@ If you need > 12 columns or want to generate the CSS manually you will need to g
222222
For instance for 4-column grid you need to write CSS to be:
223223

224224
```css
225-
.grid-stack-4 > .grid-stack-item { min-width: 25% }
226-
.grid-stack-4 > .grid-stack-item[gs-w="4"] { width: 100% }
227-
.grid-stack-4 > .grid-stack-item[gs-w="3"] { width: 75% }
228-
.grid-stack-4 > .grid-stack-item[gs-w="2"] { width: 50% }
229-
230-
.grid-stack-4 > .grid-stack-item[gs-x="3"] { left: 75% }
231-
.grid-stack-4 > .grid-stack-item[gs-x="2"] { left: 50% }
232-
.grid-stack-4 > .grid-stack-item[gs-x="1"] { left: 25% }
225+
.gs-4 > .grid-stack-item[gs-x="1"] { left: 25% }
226+
.gs-4 > .grid-stack-item[gs-x="2"] { left: 50% }
227+
.gs-4 > .grid-stack-item[gs-x="3"] { left: 75% }
228+
229+
.gs-4 > .grid-stack-item { width: 25% }
230+
.gs-4 > .grid-stack-item[gs-w="2"] { width: 50% }
231+
.gs-4 > .grid-stack-item[gs-w="3"] { width: 75% }
232+
.gs-4 > .grid-stack-item[gs-w="4"] { width: 100% }
233233
```
234234

235235
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:
@@ -239,9 +239,9 @@ $columns: 20;
239239
@function fixed($float) {
240240
@return calc(round($float * 100) / 100); // total 4 digits being %
241241
}
242-
.grid-stack-#{$columns} > .grid-stack-item {
242+
.gs-#{$columns} > .grid-stack-item {
243243
244-
min-width: fixed(calc(100% / $columns));
244+
width: fixed(calc(100% / $columns));
245245
246246
@for $i from 1 through $columns - 1 {
247247
&[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }

doc/CHANGES.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8+
- [8.1.1 (2023-05-13)](#811-2023-05-13)
89
- [8.1.0 (2023-05-06)](#810-2023-05-06)
910
- [8.0.1 (2023-04-29)](#801-2023-04-29)
1011
- [8.0.0 (2023-04-29)](#800-2023-04-29)
@@ -85,6 +86,10 @@ Change log
8586

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

89+
## 8.1.1 (2023-05-13)
90+
* fix: [#2314](https://github.com/gridstack/gridstack.js/issues/2314) fix issue with having min-height/width instead of height/width for gs-h|x="1"
91+
also further compressed CSS multi column rules (use `.gs-# > .grid-stack-item` instead of `.grid-stack-# > .grid-stack-item`)
92+
8893
## 8.1.0 (2023-05-06)
8994
* break: remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
9095
* 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.

karma.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = function(config) {
1414
// }
1515
// }
1616
// },
17-
exclude: ["demo"] // ignore dummy demo .ts files
17+
exclude: ["demo", "dist/ng"] // ignore dummy demo .ts files
1818
},
1919

2020
// base path that will be used to resolve all patterns (eg. files, exclude)

0 commit comments

Comments
 (0)