8000 added `gs-size-to-content` support by adumesny · Pull Request #2892 · gridstack/gridstack.js · GitHub
[go: up one dir, main page]
Skip to content

added gs-size-to-content support #2892

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

Merged
merged 1 commit into from
Dec 9, 2024
Merged

added gs-size-to-content support #2892

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: 5 additions & 0 deletions doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Change log
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*

- [11.1.1-dev (TBD)](#1111-dev-tbd)
- [11.1.1 (2024-11-26)](#1111-2024-11-26)
- [11.1.0 (2024-11-17)](#1110-2024-11-17)
- [11.0.1 (2024-10-21)](#1101-2024-10-21)
Expand Down Expand Up @@ -117,6 +118,10 @@ Change log

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## 11.1.1-dev (TBD)
* fix: [#2877](https://github.com/gridstack/gridstack.js/pull/2877) angular wrapper uses standalone, while now being compatible down to ng14. thanks to [andre-steudel](https://github.com/andre-steudel)
* fix: [#2886](https://github.com/gridstack/gridstack.js/issues/2886) added `gs-size-to-content` support

## 11.1.1 (2024-11-26)
* 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.
Expand Down
3 changes: 3 additions & 0 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,7 @@ export class GridStack {
minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || gridDefaults.minRow,
maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || gridDefaults.maxRow,
staticGrid: Utils.toBool(el.getAttribute('gs-static')) || gridDefaults.staticGrid,
sizeToContent: Utils.toBool(el.getAttribute('gs-size-to-content')) || undefined,
draggable: {
handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle,
},
Expand Down Expand Up @@ -1719,6 +1720,7 @@ export class GridStack {
noMove: 'gs-no-move',
locked: 'gs-locked',
id: 'gs-id',
sizeToContent: 'gs-size-to-content',
};
for (const key in attrs) {
if (node[key]) { // 0 is valid for x,y only but done above already and not in list anyway
Expand All @@ -1741,6 +1743,7 @@ export class GridStack {
n.noResize = Utils.toBool(el.getAttribute('gs-no-resize'));
n.noMove = Utils.toBool(el.getAttribute('gs-no-move'));
n.locked = Utils.toBool(el.getAttribute('gs-locked'));
n.sizeToContent = Utils.toBool(el.getAttribute('gs-size-to-content'));
Copy link
@yusufkandemir yusufkandemir Mar 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this one should support the number version as well. Without that, utilizing #2620 is not possible with gs-size-to-content.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are correct. file a bug, but as mentioned gs- attr is rather obsolete is real apps

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do, thanks.

Regarding it being "obsolete in real apps":
The Vue examples use render(), not to be confused by render functions, import { render } from 'vue' itself is a low-level API and not explained in Vue docs. It is simply not sufficient in frameworks / complex apps, as you can't simply use things like provide/inject, plugins, e.g. vue-router, Quasar, etc. inside the widget content. You would need to use createApp and do some low-level copying from the original app to that sub-app, then use that app to render widget content stuff, which is not really straightforward. So, I think gs- still has good use as it's far simpler and less prone in cases like this.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

real app should use JSON to load/save grids dynamically, and we have much better API support for all options... framework app (like my angular wrapper) gets callwed back to create the right component types.

n.id = el.getAttribute('gs-id');

// read but never written out
Expand Down
5 changes: 3 additions & 2 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,8 +256,9 @@ export interface GridStackOptions {
rtl?: boolean | 'auto';

/** set to true if all grid items (by default, but item can also override) height should be based on content size instead of WidgetItem.h to avoid v-scrollbars.
Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight()) */
sizeToContent?: boolean;
* Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight())
*/
sizeToContent?: boolean;

/**
* makes grid static (default?: false). If `true` widgets are not movable/resizable.
Expand Down
0