Opened 9 years ago

Last modified 6 years ago

#4861 open bug

Resizable: Ghosting doesn't adheer to the Grid

Reported by: seth.aldridge Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:


I have setup a simple div that moves on the X axis using resize(). The issue I've found is when I use:

ghost: true, grid: [50, 0]

The ghost property allows the element to slide in between the grid areas which will make elements not align to the grid.


handles: 'e', ghost:true, grid:[15,0], resize: function() {

$('.tasks li').unbind('mouseenter', highlight);

}, stop: function() {

$('.tasks li') .bind('mouseenter', highlight) .bind('mouseleave', hide_highlight);



Thanks, Seth

Change History (6)

comment:1 Changed 9 years ago by seth.aldridge

I also found this to be true with the alsoResize and helper properties.

Thanks, Seth

comment:2 Changed 9 years ago by Jörn Zaefferer

Milestone: TBD1.8

comment:3 Changed 9 years ago by nop

There is a quick fix: "grid" plugin should be the first one in ui.resizable.js (near the line 528)


  • Resizable Extensions */

$.ui.plugin.add("resizable", "grid", .....

Then all other plugins will have size with respect to grid.

comment:4 Changed 8 years ago by prestonparris

I have come up with a solution for this, I submitted a pull request on git hub.

comment:5 Changed 6 years ago by Scott González


comment:6 Changed 6 years ago by tj.vantoll

Status: newopen
Summary: Ghosting doesn't adheer to the GridResizable: Ghosting doesn't adheer to the Grid

Still an issue in 1.9 The pull request referenced above now 404s.

Note: See TracTickets for help on using tickets.