Skip to content

Max-width does not work as intended with resizable handle "w" #1330

Closed

Description

@JanStorm

Subject of the issue

When using option resizable.handles 'sw', 'w' or 'nw' in combination with max-width, the widget can be dragged on x-axis instead of resizing, after we tried to make it further than the max-width property.

Your environment

  • Gridstack Version 1.2.0
  • Chrome Browser Version 85.0.4183.59

Steps to reproduce

  • Add the following option to you GridStack.init method:
resizable: {
    handles: 'sw'
}
  • Then add a max-width property to the widget you want to test
  • Now, when trying to resize the widget to the left, making it bigger than the max-width, it will move (with placeholder below) until the grid ends, and then only the draggable floats free outside the grid, movable on the x-axis

JSFiddle

When using this fiddle, just resize to the left.
The Widget with the number 2 is an example without maxwidth, so it work as intended ;)
https://jsfiddle.net/c5z2ywtn/4/

Expected behaviour

It should stop resizing at max width, like when using the default handle on the bottom right corner. And not even move, when trying to make bigger as max-width

Actual behaviour

it will move (with placeholder below) instead of resize (when being larger than the max-width), until the grid ends, and then only the draggable floats freely outside the grid, movable on the x-axis

Activity

  1. changed the title [-]Max-width does not work as intended with resizable handle "sw"[/-] [+]Max-width does not work as intended with resizable handle "w"[/+] on Aug 13, 2020
  2. JanStorm commented on Aug 13, 2020

    @JanStorm
    Author

    Edited because of course this applies to all handles which goes to the left: 'sw', 'w' or 'nw'

  3. adumesny commented on Aug 13, 2020

    @adumesny
    Member

    yep, thanks for the test case.

  4. adumesny commented on Dec 5, 2020

    @adumesny
    Member

    Note to test in float.html, just change to this

    let grid = GridStack.init({float: true, resizable: { handles: 'sw' }});
    ...
    {x: 3, y: 1, maxW: 2},
  5. added a commit that references this issue on Dec 6, 2020
    1686d9d
  6. adumesny commented on Dec 6, 2020

    @adumesny
    Member

    fix in upcoming 3.1.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions