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

Jump to bottom

height too small with cellHeight:auto loading in 1 column #1600

Closed
ayman-metwally-developer opened this issue Jan 29, 2021 · 5 comments · Fixed by #1602
Closed

height too small with cellHeight:auto loading in 1 column #1600

ayman-metwally-developer opened this issue Jan 29, 2021 · 5 comments · Fixed by #1602
Labels
type:bug

Comments

@ayman-metwally-developer
Copy link

Subject of the issue

Nodes heights shrink in one-coloumn-mode.

Your environment

  • Version 3.2.0
  • Browser: 88.0.4324.104 (64bit)

Steps to reproduce

  1. Simply use the jsfiddle example and set disableOneColumnMode to false.
  2. Decrease the width of the browser to the minimal possible width.
  3. Click "Run" and observe the height of the nodes.
    https://jsfiddle.net/aymanmetwallybu/af5vy16w/3/

Also, the example on the home page has this issue. (See screenshots below)
jsfiddle sample:
image

Homepage demo:
image

Expected behavior

Nodes should maintain their heights in OneColumnMode (i.e. Node height should be the same in both modes).

Actual behavior

Nodes heights shrink. This issue was not present in earlier versions (for example 1.1.0).
@adumesny adumesny changed the title Nodes heights shrink in one-coloumn-mode. height too small with cellHeight:auto default when loading in 1 column mode size Jan 29, 2021
@adumesny
Copy link
Member

yeah, there is an easy workaround to set cellHeight:100 or something then it's the same 12 or 1 column mode. The problem is I changed the default to 'auto' (was 70px) because it's now smart enough to make square cells by default, BUT it calculates things in default 12 column mode, but when you load into <768px wide grid we switch to 1 column mode and you probably don't what 700px tall cells either, but 700/12 is also kinda small...

not sure what the right behavior is, other than maybe have a minimum height if we load into 1 column directly and cellHeight is set to auto. Either case the user has complete control of the cellHeight property. there just isn't a 12 column vs 1 column cellHeight option (not sure there should be either).

Comments ?
@aryatekpia had the same issue in #1413

@adumesny adumesny changed the title height too small with cellHeight:auto default when loading in 1 column mode size height too small with cellHeight:auto default when loading in 1 column Jan 29, 2021
@adumesny adumesny changed the title height too small with cellHeight:auto default when loading in 1 column height too small with cellHeight:auto loading in 1 column Jan 29, 2021
adumesny added a commit to adumesny/gridstack.js that referenced this issue Jan 31, 2021
@adumesny
cellHeight:auto fix
765fe3b 
- big re-write on how `cellHeight()` works. you can now call it at any time (not just grid init options) including switching to 'auto' or other modes on the fly.
- fix `cellHeight:auto` now keeps cell square as window resizes (regressing from 2.x TS conversion). `Utils.throttle()` works better too (guaranteed to be called last event)
- new `cellHeight:initial` which makes the cell squares initially, but doesn't change as windows resizes (better performance)
- new grid option `cellHeightThrottle` (100ms) to control throttle of auto sizing triggers
- fix gridstack#1600
- height too small with `cellHeight:auto` loading in 1 column. Now detect we load at 1 column and size accordingly (default 'auto' could make big 700x700 cells, so explicit px might still be wanted)
adumesny added a commit to adumesny/gridstack.js that referenced this issue Jan 31, 2021
@adumesny
cellHeight:auto fix
c647501 
- fix gridstack#1600
- big re-write on how `cellHeight()` works. you can now call it at any time (not just grid init options) including switching to 'auto' or other modes on the fly.
- fix `cellHeight:auto` now keeps cell square as window resizes (regressing from 2.x TS conversion). `Utils.throttle()` works better too (guaranteed to be called last event)
- new `cellHeight:initial` which makes the cell squares initially, but doesn't change as windows resizes (better performance)
- new grid option `cellHeightThrottle` (100ms) to control throttle of auto sizing triggers
- height too small with `cellHeight:auto` loading in 1 column. Now detect we load at 1 column and size accordingly (default 'auto' could make big 700x700 cells, so explicit px might still be wanted)
- added demo/cell-height.html
@adumesny adumesny mentioned this issue Jan 31, 2021
Merged
3 tasks
@kevinlandsberg
Copy link

Thank you @adumesny !!!

@kevinlandsberg
Copy link

When will you deploy new version?

@adumesny
Copy link
Member

adumesny commented Feb 2, 2021

couple more fixes before I do... likely this wkd.

@kevinlandsberg
Copy link

Thanks man!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type:bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

cellHeight:auto fix adumesny/gridstack.js
3 participants
@adumesny @ayman-metwally-developer @kevinlandsberg