JQuery Draggable and Sortable placeholder

I am facing a particular issue with combining draggable and sortable. The probl开发者_开发技巧em has to do with a placeholder not showing when a draggable is moved over the sortable and the drop is not "recognized". This behaviour occurs when the sortable ul hs NO height defined in css.

When i do define a fixed height in css for the #SortablePhotoList, the placeholder is shown and everything works as expected.

The important css :

#SortablePhotoList { list-style-type: none; margin: 2px; padding: 0px; width: 858px; }
.Thumbnail { cursor: hand; width: 136px; height: 102px; float: left; margin: 0 5px 5px 0; position: relative; border: 1px #717171 solid; }
.ThumbnailPlaceholder { width: 136px; height: 102px; float: left; margin: 0 5px 5px 0; border: 1px #000 dotted; }

The important javascript :

  $("#SortablePhotoList").sortable({
        revert: true,
        placeholder: 'ThumbnailPlaceholder',
        tolerance: 'pointer',
        revert: 50,
        distance: 5,
        items: 'li:not(.Upload)',
        stop: function (event, ui) {
            //Do stuff with the sorted thumbnail
        },
        receive: function (event, ui) {
            //Accept the dragged item and change it's appearance a bit
            var item = $('#SortablePhotoList li.NewlyAdded');
            $(".ImageRemove", item).show();
            $(".PhotoSelector", item).show();
            item.removeClass('NewlyAdded');
        }
    });

I could ofcourse play around with programmatically adjusting the height of the #SortablePhotoList to create a workaround for this issue, but i'd rather not go that far.

The question is, what could be the issue of not displaying the placeholder when no height is specified for the container.

Ragards, avsomeren

Change your height in css to

min-height: 102px;

Then it will default to that and when items are added it will expand to fit.