Jsquery is sorted with built-in display units.

Question

I am trying to play with a linked sortable list with jQuery, however, if I use display: inline-block in my CSS, the placeholder and placement are incorrect. It is usually higher, and also the elements change so that they cause a phrase.

If I changed the display: inline block by float: left here

ul.fieldlist li { display:inline-block; list-style-type: none; } 

Then dragdrop works fine, but for some reason I can't go back to the original sort.

I did jsfiddle to show the problem:

http://jsfiddle.net/uArNx/5/

It may be a problem with my add-ons / fields, but I could not understand.

Any help would be appreciated :)

Answer 1

The fix is vertical-align: top . As far as I can tell, JqueryUI Sortables do not handle vertical-align: middle well.

Try adding vertical alignment: top to jsfiddle - this will clear the alignment problem.

There are some notes and an initial fix for the inline box here, but I think the valid middle case has been skipped. http://bugs.jqueryui.com/ticket/6942

Answer 2

The problems here are caused by an attempt to sort the built-in blocks, each of which has its own size, determined by the variable text content.

One fix will be

• set vertical-align: top as suggested by another user

• either a) fix the size of each container in the inline block, or b) set white-space: nowrap on each of them to prevent the height line from doubling when dragging containers containing multiple words.

  Since your containers have a size in the text in them, the execution of option a) should be in javascript, ideally when the drag and drop starts (although if the list does not change, you can do it once when the page loads). Something like the following (you will need to indicate whether the radio button is correct and drag the event name ...):

   $('.li').on('dragStart', function (e) { var $this = $(this); $this.width( $this.width() ); $this.height( $this.height() ); }); 

• Finally, you may need to fix the line height for each container to avoid situations where inline images or larger text change the line height (not a problem in this jsfiddle example, but mentioning this is for everyone who might have this problem).