Opened 9 years ago

Last modified 3 years ago

#2421 open feature

Resizable breaks with %-based positioning but works with pixel-based positioning

Reported by: briang Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.5b4
Keywords: resizable haspatch Cc:
Blocked by: Blocking:

Description

I am using resizables to display an object in a Gantt-chart like setup where each resizable object represents some subset of the overall range available. If you consider horizontal sizing only, the left and right edges of the parent are the min and max values and the resizable can represent any subset of that range by dragging the edges.

Initially I attempted to position the left/width of the resizable object using percentages like so:

<div class="package" id="pkg1" style="margin: 5px; padding: 20px; background-color: #eee; left: 15%; width: 40%;">
  <div style="float: left; background-color: #ccc; width: 20%;">Package #1</div>
  <div style="float: left; background-color: #f00; width: 80px;">$250.00</a></div>
</div>

The associated resizable call was:

$(".package").resizable({ handles: 'w, e', autohide: true, minWidth: 10, containment: 'parent'});

This results in bizarre behavior where the resizable is displayed properly at first. However, upon trying to drag either handle results in the left handle snapping back to the left edge of the parent. After that, it behaves properly.

If instead you use pixels:

<div class="package" id="pkg1" style="margin: 5px; padding: 20px; background-color: #eee; left: 167px; width: 236px;">
  <div style="float: left; background-color: #ccc; width: 20%;">Package #1</div>
  <div style="float: left; background-color: #f00; width: 80px;">$250.00</a></div>
</div>

It works as expected including the initial drag. It appears the percentage is miscalculated when the widget is instantiated.

Percentage-based support would be valuable in order to support fluid layouts.

I've confirmed this in both FF 2 and IE 6 on Windows XP.

Change History (13)

comment:1 Changed 9 years ago by paul

  • Owner changed from paul to braeker

comment:2 Changed 9 years ago by paul

  • Priority changed from major to minor

comment:3 Changed 9 years ago by paul

  • Type changed from bug to enhancement

This is a enhancement, not really a a bug.

comment:4 Changed 9 years ago by anonymous

  • Milestone 1.2.4 deleted

Milestone 1.2.4 deleted

comment:5 Changed 9 years ago by paul

  • Component changed from ui.core to ui.resizable
  • Version changed from 1.2.3 to 1.5b4

comment:6 Changed 8 years ago by Cloudream

  • Milestone set to TDB

comment:7 Changed 8 years ago by jzaefferer

  • Milestone changed from TBD to 1.6
  • Owner eduardo deleted
  • Status changed from new to assigned

comment:8 Changed 8 years ago by rdworth

  • Milestone changed from 1.7 to 1.8

comment:9 Changed 6 years ago by ra

Problem: Currently % based location is overwritten with px based position ('top:20%;' -> 'top:20px'). As a result resizable item will jump.

Fix: Very easy fix - % based position needs to be kept unchanged. Does not interfere with current px based positioning. Works great with % based positioning. My fix needs just a bit more optimizing - to use only single css() instead of four css() calls.

NEW CODE:

//keep % location unchanged
if(el[0].style.top.slice(-1)!="%"){
    el.css("top",this.position.top+"px");
}
if(el[0].style.left.slice(-1)!="%"){
    el.css("left",this.position.left+"px");
}
if(el[0].style.right.slice(-1)!="%"){
    el.css("width",this.size.width+"px");
}
if(el[0].style.bottom.slice(-1)!="%"){
    el.css("height",this.size.height+"px");
}

OLD CODE:

el.css({
    top: this.position.top + "px", left: this.position.left + "px",
    width: this.size.width + "px", height: this.size.height + "px"
});

comment:10 Changed 4 years ago by scottgonzalez

  • Type changed from enhancement to feature

comment:11 Changed 4 years ago by scottgonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:12 Changed 4 years ago by mikesherov

  • Keywords haspatch added
  • Status changed from assigned to open

comment:13 Changed 3 years ago by tj.vantoll

#9722 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.