Cell FitToContent options demo
-
new 9.x feature that size the items to fit their content height as to not have scroll bars (unless `fitToContent:false` in C: case)
+
new 9.x feature that size the items to fit their content height as to not have scroll bars
+ (unless `fitToContent:false` in C: case). Defaulting to different initial size (see code) to show grow/shrink behavior.
@@ -32,22 +40,36 @@
Cell FitToContent options demo
margin: 5,
cellHeight: 50,
fitToContent: true, // default to make them all fit
+ resizable: { handles: 'all'} // do all sides for testing
// cellHeightThrottle: 100, // ms before fitToContent happens
}
let grid = GridStack.init(opts);
let text ='some very large content that will normally not fit in the window.'
text = text + text;
let items = [
- {x:0, y:0, w:2, content: `
A: ${text}
`},
- {x:2, y:0, w:1, h:2, content: '
B: shrink
'}, // make taller than needed upfront
+ {x:0, y:0, w:2, content: `
A no h: ${text}
`},
+ {x:2, y:0, w:1, h:2, content: '
B: shrink h=2
'}, // make taller than needed upfront
{x:3, y:0, w:2, fitToContent: false, content: `
C: WILL SCROLL. ${text}
`}, // prevent this from fitting testing
- {x:0, y:1, w:3, content: `
D: ${text} ${text}
`},
+ {x:0, y:1, w:3, content: `
D no h: ${text} ${text}
`},
];
grid.load(items);
function column(n) {
grid.column(n, 'none');
}
+ function cellHeight(n) {
+ grid.cellHeight(n);
+ }
+ function addWidget() {
+ grid.addWidget({content: `
New: ${text}
`});
+ }
+ function makeWidget() {
+ let doc = document.implementation.createHTMLDocument();
+ doc.body.innerHTML = `
`;
+ let el = doc.body.children[0];
+ grid.el.appendChild(el);
+ grid.makeWidget(el);
+ }