Skip to content

Commit 1929473

Browse files
committed
update responsive demo to latest options
1 parent fc40d59 commit 1929473

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

demo/responsive.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ <h1>Responsive grid demo</h1>
2222
<option value="moveScale">move + scale</option>
2323
<option value="move">move</option>
2424
<option value="scale">scale</option>
25+
<option value="list">list</option>
26+
<option value="compact">compact</option>
2527
<option value="none">none</option>
2628
</select>
2729
<a onClick="grid.removeAll()" class="btn btn-primary" href="#">Clear</a>
@@ -34,7 +36,7 @@ <h1>Responsive grid demo</h1>
3436

3537
<script type="text/javascript">
3638
let grid = GridStack.init({
37-
cellHeight: 'initial', // start square but will set to % of window width later
39+
cellHeight: 'auto', // always square
3840
animate: false, // show immediate (animate: true is nice for user dragging though)
3941
disableOneColumnMode: true, // will manually do 1 column
4042
float: true });
@@ -44,19 +46,19 @@ <h1>Responsive grid demo</h1>
4446
function resizeGrid() {
4547
let width = document.body.clientWidth;
4648
if (width < 700) {
47-
grid.column(1, layout).cellHeight('100vw');
49+
grid.column(1, layout);
4850
text.innerHTML = 1;
4951
} else if (width < 850) {
50-
grid.column(3, layout).cellHeight('33.3333vw');
52+
grid.column(3, layout);
5153
text.innerHTML = 3;
5254
} else if (width < 950) {
53-
grid.column(6, layout).cellHeight('16.6666vw');
55+
grid.column(6, layout);
5456
text.innerHTML = 6;
5557
} else if (width < 1100) {
56-
grid.column(8, layout).cellHeight('12.25vw');
58+
grid.column(8, layout);
5759
text.innerHTML = 8;
5860
} else {
59-
grid.column(12, layout).cellHeight('8.3333vw');
61+
grid.column(12, layout);
6062
text.innerHTML = 12;
6163
}
6264
};
@@ -70,7 +72,7 @@ <h1>Responsive grid demo</h1>
7072
{x: 2, y: 0, w: 2, h: 2, content: '1'},
7173
{x: 5, y: 0, content: '2'},
7274
{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'},
7476
{x: 0, y: 4, w: 12, content: '5'}
7577
];
7678
grid.load(items);

0 commit comments

Comments
 (0)