#8349 closed bug (fixed)

Opened May 24, 2012 02:48PM UTC

Closed May 24, 2012 06:33PM UTC

Last modified May 24, 2012 06:34PM UTC

Draggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions

Reported by:	non4eg	Owned by:	non4eg
Priority:	minor	Milestone:	1.8.21
Component:	ui.draggable	Version:	1.8.20
Keywords:		Cc:
Blocked by:		Blocking:

Description

If a wide drag element is placed into some fixed-width container, it is not dropped into the container and it doesn’t show any event or error. The drag element has some styles (.ui-draggable-dragging) with max-width property applied. This “feature” is not observed if the drag element initially has a width property value that is less than maximum.

Attachments (0)

Change History (9)

Changed May 24, 2012 03:24PM UTC by scottgonzalez comment:1

owner:	→ non4eg
status:	new → pending

Please provide a reduced test case showing the problem.

Changed May 24, 2012 03:43PM UTC by scottgonzalez comment:2

_comment0:	Replying to [comment:1 scott.gonzalez]: \ > Please provide a reduced test case showing the problem. \ \ {{{ \ <!DOCTYPE html> \ <html> \ <head> \ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> \ <title>jQuery UI Example Page</title> \ <link type="text/css" href="css/start/jquery-ui-1.8.20.custom.css" rel="stylesheet" /> \ <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> \ <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script> \ \ </head> \ <body> \ \ <div class="drop-area"> <p>Drop here!</p></div> \ \ <table> \ <tr> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ </tr> \ </table> \ \ <style> \ .drop-area \ { \ min-width:300px; \ background: #aaa; \ border:1px solid #444; \ max-width:250px; \ margin:0 auto; \ } \ \ .graged \ { \ display: block; \ background: #f30000; \ padding:10px; \ } \ \ .ui-draggable-dragging \ { \ max-width:300px; \ max-height:100px; \ font-size: 50%; \ overflow:hidden; \ } \ \ .ui-state-active \ { \ background: #eee; \ } \ </style> \ <script> \ \ $(".drop-area").droppable({ \ accept: '.graged', \ hoverClass: "ui-state-active", \ drop: function(event, ui) {} \ }); \ \ $(".graged").draggable({ \ revert: false, \ helper: "clone" \ }); \ \ \ </script> \ \ </body> \ </html> \ }}} → 1337874365812691
status:	pending → new

_comment0:

Replying to [comment:1 scott.gonzalez]: \ > Please provide a reduced test case showing the problem. \ \ {{{ \ <!DOCTYPE html> \ <html> \ <head> \ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> \ <title>jQuery UI Example Page</title> \ <link type="text/css" href="css/start/jquery-ui-1.8.20.custom.css" rel="stylesheet" /> \ <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> \ <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script> \ \ </head> \ <body> \ \ <div class="drop-area"> <p>Drop here!</p></div> \ \ <table> \ <tr> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ <td> \ <div class="graged"> \ <a href="#"> \ \ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. \ \ </a> \ </div> \ </td> \ </tr> \ </table> \ \ <style> \ .drop-area \ { \ min-width:300px; \ background: #aaa; \ border:1px solid #444; \ max-width:250px; \ margin:0 auto; \ } \ \ .graged \ { \ display: block; \ background: #f30000; \ padding:10px; \ } \ \ .ui-draggable-dragging \ { \ max-width:300px; \ max-height:100px; \ font-size: 50%; \ overflow:hidden; \ } \ \ .ui-state-active \ { \ background: #eee; \ } \ </style> \ <script> \ \ $(".drop-area").droppable({ \ accept: '.graged', \ hoverClass: "ui-state-active", \ drop: function(event, ui) {} \ }); \ \ $(".graged").draggable({ \ revert: false, \ helper: "clone" \ }); \ \ \ </script> \ \ </body> \ </html> \ }}} → 1337874365812691

status:

pending → new

Replying to [comment:1 scott.gonzalez]:

Please provide a reduced test case showing the problem.

[DELETED]

Changed May 24, 2012 03:43PM UTC by scottgonzalez comment:3

Whoa, please read the red box that says not to paste large blocks of code in to tickets.

Changed May 24, 2012 03:45PM UTC by scottgonzalez comment:4

http://jsbin.com/otarik/edit

Changed May 24, 2012 03:46PM UTC by non4eg comment:5

Replying to [comment:3 scott.gonzalez]:

Whoa, please read the red box that says not to paste large blocks of code in to tickets.

Sorry :)

Changed May 24, 2012 03:58PM UTC by scottgonzalez comment:6

status:	new → open
summary:	Wide element Drag-n-Drop doesn't work properly → Draggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions

An actually reduced test case: http://jsbin.com/otarik/2/edit

Changed May 24, 2012 06:33PM UTC by Viktar Varvanovich comment:7

resolution:	→ fixed
status:	open → closed

Draggable: Apply ui-draggable-dragging class prior to calculating dimensions. Fixes #8349 - Draggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions

Changeset: a0c18ea25086ed07634baff5b4fea46e69aad38e

Changed May 24, 2012 06:33PM UTC by Viktar Varvanovich comment:8