1010 < link rel ="stylesheet " href ="demo.css "/>
1111 < style type ="text/css ">
1212 .with-lines { border : 1px dotted # 777 }
13+ .scroll-container {
14+ max-height : 500px ;
15+ overflow-y : auto;
16+ border : 2px solid # aaa ;
17+ border-radius : 4px ;
18+ padding : 10px ;
19+ }
1320 </ style >
1421
1522 < script src ="../dist/gridstack-all.js "> </ script >
1623</ head >
1724< body >
1825 < div class ="container-fluid ">
19- < h1 > Two grids demo</ h1 >
20- < p > Two grids, one floating one not, showing drag&drop from sidebar and between grids.
26+ < h1 > Two grids demo, with scroll containers </ h1 >
27+ < p > Two grids, one floating one not, showing drag&drop from sidebar and between grids. Using scoll containers to test.
2128 < br > New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.</ p >
2229
2330 < div class ="row ">
@@ -51,11 +58,14 @@ <h1>Two grids demo</h1>
5158 < div class ="col-md-6 ">
5259 < a onClick ="toggleFloat(this, 0) " class ="btn btn-primary " href ="# "> float: true</ a >
5360 < a onClick ="compact(0) " class ="btn btn-primary " href ="# "> Compact</ a >
54- < div class ="grid-stack " id ="left_grid "> </ div >
61+ < div class ="scroll-container ">
62+ < div class ="grid-stack " id ="left_grid "> </ div >
63+ </ div >
5564 </ div >
5665 < div class ="col-md-6 ">
5766 < a onClick ="toggleFloat(this, 1) " class ="btn btn-primary " href ="# "> float: false</ a >
5867 < a onClick ="compact(1) " class ="btn btn-primary " href ="# "> Compact</ a >
68+ page scroll test
5969 < div class ="grid-stack " id ="right_grid "> </ div >
6070 </ div >
6171 </ div >
@@ -68,7 +78,7 @@ <h1>Two grids demo</h1>
6878 { x : 1 , y : 1 } , // intentional overlap to test collision on load
6979 { x : 3 , y : 1 } ,
7080 { x : 2 , y : 3 , w : 3 , maxW : 3 , content : 'has maxW=3' } ,
71- { x : 2 , y : 5 }
81+ { x : 2 , y : 5 , h : 20 }
7282 ] ;
7383 items . forEach ( ( item , i ) => item . content = item . content || String ( i ) ) ;
7484
0 commit comments