JQuery UI resizable does not support position: fixed; Any recommendations?

Question

JQuery UI's .resizable function does not support position: fixed; elements. The moment you try to resize them it switches their position attribute to absolute. Any recommended fixes?

I have some chat windows that pop up and are draggable around the document. They are position fixed so that they don't scroll with the page behind them. They all work perfectly until you try to resize a window, that's when it transitions to position: absolute; and then gets left behind when the page scrolls.

I tried handling the resize stop event and changing the position to fixed:

    stop: function (event, ui)
    {
        $(chatWindow).css('position', 'fixed');
    }

This doesn't work because the positioning (top: and left:) are not correct for the fixed element and when you stop resizing the element switches to fixed positioning and jumps to weird places on the page. Sometimes jumps out of the page boundries and is lost forever.

Any suggestions?

What about just putting it inside a container that's fixed at 0 0? — Paul, Feb 04 '11 at 20:54
What about (and I haven't tested this) just putting it inside a container that's fixed? — Paul, Feb 04 '11 at 20:52

score 11 · Accepted Answer · answered Feb 20 '13 at 00:50

11

To get over this problem I wrapped the .resizable() block with the .draggable() block:

<div id="draggable-dealie">
    <div id="resizable-dealie">
    </div>
</div>

the corresponding js:

$("#draggable-dealie").draggable();
$("#resizable-dealie").resizable();

and ensure you have the property position:fixed !important; set in the #draggable-dealie CSS:

#draggable-dealie {
    position:fixed !important;
    width:auto;
    height:auto;
}

I have a demonstration at: http://jsfiddle.net/smokinjoe/FfRRW/8/

answered Feb 20 '13 at 00:50

Smokin Joe

443
5
15

1

Bravo! This is a much better solution. JQuery UI just needs to fix this so you can use both on a single fixed element, but until then this is about as elegant a solution as I've seen. – CatDadCode Feb 21 '13 at 14:57
1

The !important part fixed the problem for me and saved me lots of work. Thank you. – xsl Jul 18 '13 at 15:50
2

Hardcoding top/left with !important solved the problems for me. It ain't pretty, but I'll take it, because it's either that or reimplementing the resizable logic by yourself. – Mahn Sep 01 '13 at 13:52

score 6 · Answer 2 · answered Feb 05 '13 at 22:03

6

If, like me, you have a fixed div at the bottom of the page, then you can just add !important to these css rules to make it stick at the bottom :

.fixed {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}

And just make it resizable by its north border :

$('.fixed').resizable({
  handles: "n"
});

answered Feb 05 '13 at 22:03

Jide

1,130
2
12
18

This should be the accepted answer for being css only, as opposed to html and js overhead. – Nick Mitchell Jul 08 '15 at 05:28

Dane Iracleous · Answer 3 · 2014-04-13T08:27:47.453

3

Simply force position:fixed on the element when resizing starts and when resizing stops.

$(".e").draggable().resizable({
   start: function(event, ui) {
      $(".e").css("position", "fixed");
   },
   stop: function(event, ui) {
      $(".e").css("position", "fixed");
   }
});

JSFiddle: http://jsfiddle.net/5feKU/

edited Apr 13 '14 at 08:27

answered Apr 13 '14 at 08:18

Dane Iracleous

1,659
2
16
35

Maximilian Ehlers · Answer 4 · 2011-01-27T17:44:42.227

2

No beauty but how about saving the position (top and left) in separate vars on the start of the resize (I think the method is called "start")?

UPDATE (Thank you for the comment... The event fires too late): As JqueryUI generates a second object "ui" on making a object resizable it gives that ui-object a field: ui.originalPosition... That should be the position of the fixed element before the resizing...

edited Jan 27 '11 at 17:44

answered Jan 27 '11 at 17:14

Maximilian Ehlers

328
1
6

I don't know why I didn't think to try that. Cross your fingers :) – CatDadCode Jan 27 '11 at 17:16
I ran a test, it looks like that position is changed BEFORE the start event fires. Dang! – CatDadCode Jan 27 '11 at 17:35
1

GAH! So I saved the position in every place where the window gets dragged and/or created. That gets me the correct position in the stop event, but guess what? IT CHANGES THE POSITION AFTER THE STOP EVENT. RAGE. – CatDadCode Jan 27 '11 at 17:55
It's so weird that I can change the position to fixed in the resize stop event, but changing top or left does nothing. Those have to be getting set after the stop event, there is no other explanation. – CatDadCode Jan 27 '11 at 18:06
1

Okay so I lied, I can set the position on the stop event. I was just setting the CSS incorrectly. D'OH! But it is true that you can't get position in the start event as it's already been changed. – CatDadCode Jan 27 '11 at 18:36
UPDATE: In IE it would jump while resizing (disappear) and then appear back when done resizing. Instead of the resize stop event, I had to use the resize "resize" event so it constantly updates the position while resizing. That fixes IE. – CatDadCode Jan 27 '11 at 20:47
Just declare top/left as !important in your css and it will override what jquery ui is doing. – Mahn Sep 01 '13 at 13:55

score 2 · Answer 5 · answered Feb 04 '11 at 20:46

Here's the solution I came up with, it's a little more code than I'd like, but it fixes the problem:

$("#test").resizable({stop:function(e, ui) {
    var pane = $(e.target);
    var left = pane.attr("startLeft");
    var top = pane.attr("startTop");
    pane.css("position", "fixed");
    pane.css("top", top);
    pane.css("left", left);
}});
$("#test").draggable({create: function(e, ui) {
    var pane = $(e.target);
    var pos = pane.position();
    pane.attr("startLeft", pos.left + "px");
    pane.attr("startTop", pos.top + "px");
}, stop: function(e, ui) {
    var pane = $(e.target);
    pane.attr("startLeft", ui.position.left + "px");
    pane.attr("startTop", ui.position.top + "px");
}});

This stores the top and left position in the html element (needs xhtml doctype to be valid) and uses that information to set the position at the end of the resizing event.

score 1 · Answer 6 · answered Feb 07 '13 at 17:14

This is a dirty solution but works for me.

this.resizable({
    start:function (event, ui){
         x =ui.originalPosition.left+ $(ui.originalElement).parent().scrollLeft()
         y = ui.originalPosition.top+ $(ui.originalElement).parent().scrollTop()
    },
    resize:function (event, ui){
         $(ui.originalElement).css('left' , x);
         $(ui.originalElement).css('top' , y);
}

score 0 · Answer 7 · edited Oct 20 '12 at 01:17

0

I had that problem today, and I absolutely hate "un-aesthetic" workarounds... So I decided to experiment a little to see if there wasn't a "better" solution ...and at some point I had a hunch:

html:

<div class="fixed"></div>

javascript (jquery):

$('.fixed').resizable();
$('.fixed').draggable();

css:

.fixed{
    position: fixed !important;
}

Jquery just got outplayed by CSS, damn!

edited Oct 20 '12 at 01:17

Luca

9,259
5
46
59

answered May 15 '12 at 13:34

oldlol

178
2
7

JQuery UI resizable does not support position: fixed; Any recommendations?

7 Answers7

Linked