Opened 11 years ago

Closed 7 years ago

Last modified 7 years ago

#3628 closed bug (worksforme)

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

Change History (16)

comment:1 Changed 11 years ago by tmm1

This is caused by the bugfix put in for #1749

comment:2 Changed 11 years ago by Scott González

Milestone: TBD1.6
Priority: minormajor

comment:3 Changed 11 years ago by rdworth

Milestone: 1.71.8

comment:4 in reply to:  description Changed 10 years ago by Charuru

Has this yet been fixed?

comment:5 Changed 9 years ago by ile123

Please, can you fix this...

comment:6 Changed 9 years ago by Chevex

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?

Version 0, edited 9 years ago by Chevex (next)

comment:7 Changed 8 years ago by daveprimed

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?

Last edited 8 years ago by daveprimed (previous) (diff)

comment:8 Changed 8 years ago by codeblock

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.

comment:9 Changed 7 years ago by SergeSol

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});
                   },
                   ...
});


Last edited 7 years ago by SergeSol (previous) (diff)

comment:10 Changed 7 years ago by Scott González

#8580 is a duplicate of this ticket.

comment:11 Changed 7 years ago by Scott González

Milestone: 1.9.02.0.0

comment:12 Changed 7 years ago by tj.vantoll

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).

comment:13 Changed 7 years ago by Scott González

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.

comment:14 Changed 7 years ago by Scott González

Resolution: worksforme
Status: openclosed

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

comment:15 Changed 7 years ago by CodeTunnel

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.

Last edited 7 years ago by CodeTunnel (previous) (diff)

comment:16 Changed 7 years ago by Scott González

@CodeTunnel: Upgrade to jQuery 1.9.1.

Note: See TracTickets for help on using tickets.