Skip to content

Commit

Permalink
more resizeToContent fixes
Browse files Browse the repository at this point in the history
* more fix gridstack#404
* resizeToContentParent is now GridStackWidget var as well (local override) for widgets that needs to resize differently.
  • Loading branch information
adumesny committed Sep 4, 2023
1 parent 1bd5764 commit e7c3203
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 5 deletions.
1 change: 1 addition & 0 deletions doc/CHANGES.md
Expand Up @@ -99,6 +99,7 @@ Change log
## 9.0.2-dev (TBD)
* renamed fitToContent to sizeToContent (API BREAK)
* feat: `sizeToContent` now supports being `boolean|number` to limit the height but user can resize past that, unlike maxH.
* feat: `resizeToContentParent` now on GridStackWidget for those widgets that need to resize differently.

## 9.0.2 (2023-08-29)
* fix 'resizecontent' event fix not called.
Expand Down
13 changes: 8 additions & 5 deletions src/gridstack.ts
Expand Up @@ -1266,6 +1266,7 @@ export class GridStack {
Note: this assumes only 1 child under '.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted */
public resizeToContent(els: GridStackElement) {
GridStack.getElements(els).forEach(el => {
if (!el.clientHeight) return; // 0 when hidden, skip
let n = el?.gridstackNode;
if (!n) return;
const grid = n.grid;
Expand All @@ -1274,8 +1275,9 @@ export class GridStack {
const cell = this.getCellHeight();
if (!cell) return;
let height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
if (!height) return; // 0 when hidden, skip
const item = el.querySelector(GridStack.resizeToContentParent);
let item: Element;
if (n.resizeToContentParent) item = el.querySelector(n.resizeToContentParent);
if (!item) item = el.querySelector(GridStack.resizeToContentParent);
if (!item) return;
const child = item.firstElementChild;
// NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
Expand All @@ -1287,9 +1289,10 @@ export class GridStack {
height += wantedH - itemH;
let h = Math.ceil(height / cell);
// check for min/max and special sizing
if (Number.isInteger(n.sizeToContent)) {
if (h > (n.sizeToContent as number)) {
h = n.sizeToContent as number;
const softMax = Number.isInteger(n.sizeToContent) ? n.sizeToContent as number : 0;
if (softMax) {
if (h > softMax) {
h = softMax;
el.classList.remove('size-to-content'); // get v-scroll back
} else el.classList.add('size-to-content');
}
Expand Down
2 changes: 2 additions & 0 deletions src/types.ts
Expand Up @@ -324,6 +324,8 @@ export interface GridStackWidget extends GridStackPosition {
/** local (vs grid) override - see GridStackOptions.
* Note: This also allow you to set a maximum h value (but user changeable during normal resizing) to prevent unlimited content from taking too much space (get scrollbar) */
sizeToContent?: boolean | number;
/** local override of GridStack.resizeToContentParent that specify the class to use for the parent (actual) vs child (wanted) height */
resizeToContentParent?: string;
/** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */
subGridOpts?: GridStackOptions;
}
Expand Down

0 comments on commit e7c3203

Please sign in to comment.