@@ -22,6 +22,8 @@ <h1>Responsive grid demo</h1>
22
22
< option value ="moveScale "> move + scale</ option >
23
23
< option value ="move "> move</ option >
24
24
< option value ="scale "> scale</ option >
25
+ < option value ="list "> list</ option >
26
+ < option value ="compact "> compact</ option >
25
27
< option value ="none "> none</ option >
26
28
</ select >
27
29
< a onClick ="grid.removeAll() " class ="btn btn-primary " href ="# "> Clear</ a >
@@ -34,7 +36,7 @@ <h1>Responsive grid demo</h1>
34
36
35
37
< script type ="text/javascript ">
36
38
let grid = GridStack . init ( {
37
- cellHeight : 'initial ' , // start square but will set to % of window width later
39
+ cellHeight : 'auto ' , // always square
38
40
animate : false , // show immediate (animate: true is nice for user dragging though)
39
41
disableOneColumnMode : true , // will manually do 1 column
40
42
float : true } ) ;
@@ -44,19 +46,19 @@ <h1>Responsive grid demo</h1>
44
46
function resizeGrid ( ) {
45
47
let width = document . body . clientWidth ;
46
48
if ( width < 700 ) {
47
- grid . column ( 1 , layout ) . cellHeight ( '100vw' ) ;
49
+ grid . column ( 1 , layout ) ;
48
50
text . innerHTML = 1 ;
49
51
} else if ( width < 850 ) {
50
- grid . column ( 3 , layout ) . cellHeight ( '33.3333vw' ) ;
52
+ grid . column ( 3 , layout ) ;
51
53
text . innerHTML = 3 ;
52
54
} else if ( width < 950 ) {
53
- grid . column ( 6 , layout ) . cellHeight ( '16.6666vw' ) ;
55
+ grid . column ( 6 , layout ) ;
54
56
text . innerHTML = 6 ;
55
57
} else if ( width < 1100 ) {
56
- grid . column ( 8 , layout ) . cellHeight ( '12.25vw' ) ;
58
+ grid . column ( 8 , layout ) ;
57
59
text . innerHTML = 8 ;
58
60
} else {
59
- grid . column ( 12 , layout ) . cellHeight ( '8.3333vw' ) ;
61
+ grid . column ( 12 , layout ) ;
60
62
text . innerHTML = 12 ;
61
63
}
62
64
} ;
@@ -70,7 +72,7 @@ <h1>Responsive grid demo</h1>
70
72
{ x : 2 , y : 0 , w : 2 , h : 2 , content : '1' } ,
71
73
{ x : 5 , y : 0 , content : '2' } ,
72
74
{ x : 1 , y : 3 , w : 4 , content : '3' } ,
73
- { x : 5 , y : 2 , w : 2 , content : '4' } ,
75
+ { x : 5 , y : 3 , w : 2 , content : '4' } ,
74
76
{ x : 0 , y : 4 , w : 12 , content : '5' }
75
77
] ;
76
78
grid . load ( items ) ;
0 commit comments