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

Dragging toolbar item in out in doesn't honour gs-w attribute sizes #2667

Open
BussiGiu opened this issue Apr 24, 2024 · 4 comments
Open

Dragging toolbar item in out in doesn't honour gs-w attribute sizes #2667

BussiGiu opened this issue Apr 24, 2024 · 4 comments
Labels
type:bug

Comments

@BussiGiu
Copy link

Subject of the issue

I have a toolbar with one widget and attributes set to gs-w="1" and gs-h ="1".
When I try to drag and drop the widget inside the grid it usually works fine, but if I accidentally first drag it inside and outside of the grid and then drop it inside, the widget ends up occupying a space that doesn't honour the width and height attributes.
Also, the attributes set into the HTML disappear and from now on, they are completely ignored.

I'm using Gridstack in Angular and the widget toolbar implements BaseWidget class but I also managed to reproduce the issue without Angular, so I don't think Angular makes any difference here.

Your environment

  • gridstack.js - 10.1.2
  • angular - 16.1.2 (not necessary to reproduce)

Steps to reproduce

I recreated the bug in this demo: https://jsfiddle.net/gusn6cvy/11/
And here's is a video of the effect:

gridstackToolbarSizeBug.mov

Expected behaviour

Dragging a widget from a toolbar should create a widget on the grid that maintains the original attributes (gs-w and gs-h) even if it's dragged inside and outside of the grid many times.
@dinozof
Copy link

dinozof commented Apr 24, 2024

I'm having the same issue as well!

@adumesny
Copy link
Member

thanks for the report. When leaving the grid we try to find if it came from another grid and restore that but this appears to mess the toolbar...

@sfragis sfragis mentioned this issue May 9, 2024
Merged
3 tasks
@AndreasHerss
Copy link

@BussiGiu i ran into the same issue as you, first time it gives 1x1 next time a 2x1.

My solution was to change the setupDragIn to contain definitions for the widget like so
GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' }, [{w:1, h:1}]);
If you're having multiple widgets that need different parameters, you can define them in the array too, or just call the setupDragIn multiple times with different dragIn classes and the [{w:1, h:1}] applied :)

@adumesny
Copy link
Member

adumesny commented Nov 8, 2024

@AndreasHerss oh yeah, forgot about this bug. I totally revamped how drag&drop from toolbar works in V11 and added the ability to have WidgetItem assigned to toolbar items, given you full power (since gs- attributes are limited in choices).
I thought that might have fixed the gs-w as well but looks like maybe not... odd because if you don't supply WidgetItem the the clone being dragged is the thing that gets inserted, NOT the original toolbar item cloned again in code. but the in out in code maybe didn't change....

@adumesny adumesny changed the title [BUG] Dragging a widget into the grid doesn't honour expected aspect ratio Dragging toolbar item in out in doesn't honour gs-w attribute sizes Nov 8, 2024
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

No branches or pull requests
4 participants
@adumesny @AndreasHerss @dinozof @BussiGiu