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.

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

Can't resize from bottom handler when the grid item is at the bottom of page/container #1001

Closed
jonathangriguol opened this issue Jul 18, 2019 · 9 comments
Labels

Comments

@jonathangriguol
Copy link

##Can't resize from bottom handler when the grid item is at the bottom of page/container

I want to resize from the bottom border a Grid Item which is placed at the bottom of the Grid container (and screen o parent of this grid container)
Even the grid is initialized with height = 0 and draggable.scroll = true the item collides with the lower edge and the Grid doesn't increase it's heigth size
I try to override resizable.resize method, but I can't, also can't listen on resize event for each item grid in order to increase manually the grid heigth.

Example from gridstack site (http://gridstackjs.com/demo/float.html)
red arrows indicates that I'm trying to resize on this direction frmo the lower edge.

image

Can help me? thanks!

Your environment

  • gridstack.js 1.0.0-dev (any version)
  • Version 75.0.3770.80 (Official Build) (64-bit)

Steps to reproduce

Test here:
https://jsfiddle.net/td6zyL8v/1/
Try to resize the 3rd item more than the visible height

Expected behaviour

I think the grid container should auto scroll and increase its heigth, like if you are dragging a item grid

Actual behaviour

You can't resize more than the bottom limit

@adumesny
Copy link
Member

adumesny commented Dec 21, 2019

@jonathangriguol your sample is using a VERY old v0.3.0 CSS and not sure what JS version (1.0.0-dev was used for very time and doesn't tell me what).

I'm not seeing this at all using current build (Chrome 79, and https://gridstackjs.com/demo/float.html
I can drag below OR resize below and it will auto-scroll while doing it just fine.
closing for now unless you can show video issue.

@hbcarlos
Copy link
Contributor

hbcarlos commented Dec 5, 2020

Hi, I've been trying v3.1 and is working smoothly. Thanks!

The drag scrolling issue is solved but unfortunately, the resize scrolling issue still there. You can see the issue in the example https://gridstackjs.com/demo/float.html. If you try to resize at the bottom of the screen it doesn't work but does the drag and drop.

Screen Recording 2020-12-05 at 22 54 06

@adumesny adumesny reopened this Dec 5, 2020
@adumesny
Copy link
Member

adumesny commented Dec 7, 2020

because items will not grow unless half way past mid point of a grid height, the only way to fix that is it add an additional extra bottom row when item you are currently dragging/sizing is near the bottom, then make it normal height when done...

@hbcarlos
Copy link
Contributor

hbcarlos commented Dec 7, 2020

Thanks for the advice. I've been trying what you said but I'm having some troubles.

When scrolling the placeholder stays in his place but the item moves downward rather than growing and that prevents the placeholder to continue growing. I'm not sure how to prevent the item to move.

gridstack

@adumesny
Copy link
Member

adumesny commented Dec 7, 2020

D&D probably doesn't handle scrolling while dragging, so not surprised we will need more fixes than just 'having enough room' to grow. Might want to try 3.1.1 when I get it out in case it magically fixes that too :)

@hbcarlos
Copy link
Contributor

hbcarlos commented Dec 7, 2020

Okay, thanks!

I'll wait for 3.1.1. In case is not fixed by then I'll open a PR to try to fix it :)

@adumesny
Copy link
Member

adumesny commented Dec 7, 2020

all my latest fixes are in develop branch, just go from there.

@hbcarlos
Copy link
Contributor

hbcarlos commented Dec 7, 2020

All right, I'll pick up from there.

@adumesny
Copy link
Member

adumesny commented Jan 3, 2021

fixed in 3.1.3

@adumesny adumesny closed this as completed Jan 3, 2021
adumesny added a commit to adumesny/gridstack.js that referenced this issue Jan 3, 2021
making sure yarn test still works (now returns main doc if no explicit scrolling parent)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants