IE7 Interface Sortable Boxes breaks

[sosensible]

When you eliminate all the boxes from the middle column in the demo it no longer allows you to drag something new back in. (Perhaps there needs to be a   or something.) So it's almost useable... but not working in the most dominate browser would be a killer feature in the wrong way.

[timmaffett]

If you add a fixed height (like 'height: 300px') to the .groupWrapper css class then the drag region does not shrink and you can drag to an empty region (add a 'border: 2px solid red;' to the .groupWrapper class and you can see how it is shrinking to only a few pixels when there are not items in the div. (this because the 'min-height: 300px' css is being ignored by ie). I do notice some animation flicker when expanding/contracting in ie7 however...

[jwise]

timmaffett, gave a workaround, but that probably doesn't completely solve the problem, since now the boxe\ would be static in every browser and not expanding/contracting as might be desired. I would recommend trying the following code:

/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em; 
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

This solves the problem since IE will auto-expand when content is greater than the 8em, while the other browsers will use the normal min-height code.

​This method is used by Stu Nicholls over at CSS Play.

[scott.gonzal]

Interface is no longer supported; consider switching to ​jQuery UI.