Skip to main content

Search and Top Navigation

#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: newpending

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">&nbsp;<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: pendingnew

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

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: newopen
summary: Wide element Drag-n-Drop doesn't work properlyDraggable: 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: openclosed

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

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

(cherry picked from commit a0c18ea25086ed07634baff5b4fea46e69aad38e)

Changeset: 168a21d5ef3e0df0f03aa860ae798a8f7de35210

Changed May 24, 2012 06:34PM UTC by scottgonzalez comment:9

milestone: 1.91.8.21