jquery sortable placeholder height problem

Question

For some reason the placeholder for my sortable items is about 10px. All my sortable items have different heights. How can I change the height of each placeholder to match the item being moved?

Answer 1

I usually solve this by binding a callback that sets the height of the placeholder to the height of the item being sorted to the start event. It's a simple solution that gives you fine-grained control over how you want your placeholder to be displayed.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

See updated test case

Answer 2

Have you tried setting the forcePlaceholderSize:true property? Have a read on the jQuery UI Sortable documentation page.

Answer 3

Instead of using "ui.item.height()" you can use "ui.helper[0].scrollHeight" to stable result when drag an item from external container too.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

Answer 4

Are your elements display: block ? Inline elements might make the placeholder not keep the height correctly. Eg. this jsFiddle seems to have a similar problem to the one you described. Adding display: block to the .portlet class fixes it.

Answer 5

You can set a style for your placeholder as an option for your sortable.

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

And just give that style a height. Hope that works.

Answer 6

In my case I found solution similar to JP Hellemons, in which I'm forcing height of placeholder (with !important) to custom and also setting visibility with background to see changes for myself (also you can style this way your placeholder anyhow you want).

This works also with display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px