Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

resizeToContent() now handle content above sub grid #2879

Merged
merged 1 commit into from
Nov 26, 2024
Merged

resizeToContent() now handle content above sub grid #2879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions demo/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,5 @@ h1 {
}
.grid-stack.grid-stack-nested {
background: none;
/* background-color: red; */
/* take entire space */
position: absolute;
inset: 0; /* TODO change top: if you have content in nested grid */
inset: 0;
}
9 changes: 7 additions & 2 deletions demo/nested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,14 @@ <h1>Nested grids demo</h1>
<a class="btn btn-primary" onClick="load(false)" href="#">Load</a>
<br><br>
<!-- grid will be added here -->
</div>
</div>d
<script src="events.js"></script>
<script type="text/javascript">
// NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
GridStack.renderCB = function(el, w) {
if (w.content) el.innerHTML = w.content;
};

let staticGrid = false;
let sub1 = [ {x:0, y:0}, {x:1, y:0}, {x:2, y:0}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
let sub2 = [ {x:0, y:0, h:2}, {x:1, y:1, w:2}];
Expand All @@ -66,7 +71,7 @@ <h1>Nested grids demo</h1>
subGridOpts: subOptions, // all sub grids will default to those
children: [
{x:0, y:0, content: 'regular item'},
{x:1, y:0, w:4, h:4, sizeToContent: true, subGridOpts: {children: sub1, id:'sub1_grid', class: 'sub1'}},
{x:1, y:0, w:4, h:4, sizeToContent: true, content: '<div>nested grid sizeToContent:true with some header content</div>', subGridOpts: {children: sub1, id:'sub1_grid', class: 'sub1'}},
{x:5, y:0, w:3, h:4, subGridOpts: {children: sub2, id:'sub2_grid', class: 'sub2'}},
]
};
Expand Down
3 changes: 2 additions & 1 deletion doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,8 @@ Change log
<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## 11.1.0-dev (TBD)
* fix: [#2877](https://github.com/gridstack/gridstack.js/pull/2877) make sure sub-grid inherit parent opts by default, with subgrid defaults.
* fix: [#2878](https://github.com/gridstack/gridstack.js/pull/2878) make sure sub-grid inherit parent opts by default, with subgrid defaults.
* fix: [#2879](https://github.com/gridstack/gridstack.js/pull/2879) sub-grid item `sizeToContent:true` now handle content above/below sub grid.

## 11.1.0 (2024-11-17)
* feat: [#2864](https://github.com/gridstack/gridstack.js/issues/2864) added `GridStackOptions.layout` for nested grid reflow during resize. default to 'list'.
Expand Down
5 changes: 4 additions & 1 deletion src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1408,8 +1408,11 @@ export class GridStack {
const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
let wantedH: number;
if (n.subGrid) {
// sub-grid - use their actual row count * their cell height
// sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text)
wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
const subRec = n.subGrid.el.getBoundingClientRect();
const parentRec = n.subGrid.el.parentElement.getBoundingClientRect();
wantedH += subRec.top - parentRec.top;
} else if (n.subGridOpts?.children?.length) {
// not sub-grid just yet (case above) wait until we do
return;
Expand Down