0

I have this weird problem with margins in sortable after dragging. margins seem to disappear and boxed stick to each other. Played around with it for quite a bit and couldn't find the problem.

Any help would be highly appreciated.

Here's a fiddle: http://jsfiddle.net/YsG6S/
And the CSS:

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; width:500px; }
li { width: 200px; height:100px; display:inline-block; border:1px solid black; }

(Sort and drag to see the margin issue)

Kara
  • 6,115
  • 16
  • 50
  • 57
Nir Tzezana
  • 2,275
  • 3
  • 33
  • 56
  • do you want the white space to be there between the left/right `li`s like it is now? or should they all be collapsed? – Will Mar 12 '14 at 09:00
  • Specify the margin in your CSS. It will solve the problem. but I'm not sure what causes it. – Sen Jacob Mar 12 '14 at 09:03
  • possible duplicate of [A Space between Inline-Block List Items](http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items) – Niklas Mar 12 '14 at 09:06

1 Answers1

4

Set the li elements to display: block and float them.

/* changes */
li { 
    display: block;
    margin-right: 2px; /*if you want the space*/
    float: left;
}

Fiddle: http://jsfiddle.net/mKeAL/

EDIT 1
Looks like this is a whitespace/display-inline bug of some sort with jquery UI.

General bugginess reported here: http://bugs.jqueryui.com/ticket/6942

Author replied 'works for me', pointing at this working fiddle http://jsfiddle.net/T8gkC/ but note the whitespace on the list items in the HTML. I remember an IE5.5 (6) bug that had a similar resolution. If you make the HTML "normal", the bug is back: http://jsfiddle.net/94Vs2/ Adding margin to the list items helps a tiny bit but if you look closely, the bug is still there.

So... if you need them to be display: inline-block you might try removing the white space in between each <li>.

EDIT 2
According to the answer at A Space between Inline-Block List Items you can also set a font-size of 0 on the ul and reset it on the li: http://jsfiddle.net/YsG6S/2/ Works fine, margin wise. That said, note the difference in drag/drop/sort interactions with the block/float method vs any of the inline-block methods.

EDIT 3
Another option is to drink mightily from the HTML5 fountain and omit your closing </li> tags. http://jsfiddle.net/mKeAL/1/

Community
  • 1
  • 1
Will
  • 4,075
  • 1
  • 17
  • 28