Skip to main content

Search and Top Navigation

#3628 closed bug (worksforme)

Opened November 27, 2008 01:18AM UTC

Closed October 29, 2012 07:18PM UTC

Last modified February 21, 2013 04:00PM UTC

Resizable position: fixed is not supported

Reported by: tmm1 Owned by:
Priority: major Milestone: 2.0.0
Component: ui.resizable Version: 1.6rc2
Keywords: Cc:
Blocked by: Blocking:
Description

if a div is position fixed, ui.resizable will make it position absolute, which causes it to jump on the page if you're scrolled down

Attachments (0)
Change History (16)

Changed November 27, 2008 01:26AM UTC by tmm1 comment:1

This is caused by the bugfix put in for #1749

Changed January 02, 2009 02:41PM UTC by scottgonzalez comment:2

milestone: TBD1.6
priority: minormajor

Changed March 08, 2009 02:33PM UTC by rdworth comment:3

milestone: 1.71.8

Changed September 28, 2009 06:27AM UTC by Charuru comment:4

Has this yet been fixed?

Changed August 13, 2010 05:17AM UTC by ile123 comment:5

Please, can you fix this...

Changed January 27, 2011 06:00PM UTC by Chevex comment:6

_comment0: Okay, so I've tried everything. I need an element to be fixed position. I tried setting position back to fixed in the resize stop event. Nope, css properties top and left are set differently for absolute positioning so changing it to fixed made the element jump. Okay, so I tried to save it's position in the resize start event, and then set the position in the stop event. Nope, the absolute positioning changes BEFORE the resize start event. Alright fine, everywhere the DIV is dragged or created I store the ending position and set it in the resize stop event. NOPE IT CHANGES THE POSITIONING AFTER THE DAMN STOP EVENT TOO. Ugh, can you please please please support fixed elements?1296153440020652

Okay, so I've tried everything. I need an element to be fixed position. I tried setting position back to fixed in the resize stop event. Nope, css properties top and left are set differently for absolute positioning so changing it to fixed made the element jump. Okay, so I tried to save it's position in the resize start event, and then set the position in the stop event. Nope, the absolute positioning changes BEFORE the resize start event. Alright fine, everywhere the DIV is dragged or created I store the ending position and set it in the resize stop event. That last one worked, but it would be nice if this bug was just fixed.

Changed October 20, 2011 01:39PM UTC by daveprimed comment:7

_comment0: puting a div inside the fixed element and making that resizeable, height 100% or something like that means it will stay fixed and you'll me able to resize1319118053804151

puting a div inside the fixed element and making that resizeable, height 100% or something like that means it will stay fixed and you'll me able to resize. Firefox doesnt like this?

Changed November 13, 2011 05:29AM UTC by codeblock comment:8

Another vote for this. Can't get any of the workarounds working, and need to resize a div that is fixed to the bottom of a page.

Changed May 29, 2012 03:59PM UTC by SergeSol comment:9

_comment0: I met such problem too. I fix it after resize is finished. This is my workaround: \ \ \ {{{ \ $("#somebox").resizable({ ..., \ stop: function() { \ var boxTop=jQuery("#somebox").offset().top; \ var boxLeft=jQuery("#somebox").offset().left; \ $("#somebox").css("position", "fixed"); \ $("#somebox").offset({top:boxTop,left:boxLeft}); \ }, \ ... \ }); \ \ \ }}} \ 1338307393835642

I met such problem too. I fix it after resize is finished. This is my workaround:

$("#somebox").resizable({ ...,
                   stop: function() {
                      var boxTop=$("#somebox").offset().top;
                      var boxLeft=$("#somebox").offset().left;
                      $("#somebox").css("position", "fixed");
                      $("#somebox").offset({top:boxTop,left:boxLeft});
                   },
                   ...
});


Changed September 16, 2012 06:27PM UTC by scottgonzalez comment:10

#8580 is a duplicate of this ticket.

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:11

milestone: 1.9.02.0.0

Changed October 27, 2012 01:16AM UTC by tj.vantoll comment:12

status: newopen
summary: resizable does not support position: fixedResizable position: fixed is not supported

If someone watching or commenting on this issue could provide a reduced test case it would help significantly in getting this issue looked. To get you started, use this boilerplate: http://jsfiddle.net/ZgAqH/ Open the link and click to "Fork" (in the top menu).

Changed October 29, 2012 07:11PM UTC by scottgonzalez comment:13

I can't seem to reproduce it right now, even going back to 1.7.0, but I know this was a real bug. I'm fairly certain I even wrote code to work around this while using 1.8.x in production.

Here's a reduced test case that shows it working: http://jsfiddle.net/ZwNFG/ This really baffles me because I know this was broken. Without a failing test case, I'm not sure there's anything we can do though.

Changed October 29, 2012 07:18PM UTC by scottgonzalez comment:14

resolution: → worksforme
status: openclosed

Based on that fiddle, this is working. Fixed position resizables break if the element is also draggable, see #6939.

Changed February 21, 2013 03:52PM UTC by CodeTunnel comment:15

_comment0: This is still broken. Please re-open. Here is a reduced test case and work around. \ \ Bug: \ http://jsfiddle.net/FfRRW/10/ \ Simply scroll down on the page and then try to resize the fixed element. It jumps position on the page during resize. \ \ Workaround: \ http://jsfiddle.net/FfRRW/11/ \ The simplest workaround I've found is to make the resizable element a child of the draggable element. This works but adds unnecessary complexity. It would be much nicer if resizable simple worked on the fixed draggable element.1361462033670903

This is still broken. Please re-open. Here is a reduced test case and work around.

Bug:

http://jsfiddle.net/FfRRW/10/

Simply scroll down on the page and then try to resize the fixed element. It jumps position on the page during resize.


Workaround:

http://jsfiddle.net/FfRRW/11/

The simplest workaround I've found is to make the resizable element a child of the draggable element. This works but adds unnecessary complexity. It would be much nicer if resizable simple worked on the fixed draggable element.

Changed February 21, 2013 04:00PM UTC by scottgonzalez comment:16

@CodeTunnel: Upgrade to jQuery 1.9.1.