Friday, September 6, 2013

jquery ui sortable: element width calculated too small

jquery ui sortable: element width calculated too small

Fiddle: http://jsfiddle.net/RqE2p/
There is a list of sortable() inline text elements. The elements are
"number one", "number two", ...etc. The problem with some of them (in my
case e.g. "number five" and "number two", but it depends on current
browser zoom I think) is that as soon as I start dragging it, the second
word goes to the second line.
That's because the width of the element changes while dragging. In Chrome
Inspector, Computed Styles, the "number five" width before dragging is
75.19999px. As soon as dragging starts, the computed width is 75px. So,
the second word doesn't fit into the first line anymore.
For this example, I have problem only in Chrome. But in real life project,
this happens in FF, too. I don't know, why in this example all is ok in
FF.
Is there any simple method to deal with this, other than maybe making a
javascript loop and setting each sortable element's css width to 1.1 times
its current width?

No comments:

Post a Comment