Sortable placeholder when dragging a connected element

I am facing an issue with combining draggable and sortable.

The problem has to do with a placeholder not showing when a draggable is moved over the sortable (#SortablePhotoList) the drop is not "recognized". This behaviour occurs when the sortable ul element doesn't have a height defined in css.

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

The important css :

#SortablePhotoList { list-style-type: none; margin: 2px; padding: 0px; width: 858px; /* height:200px; */ }
.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');
        }
    });

Ragards, avsomeren