jquery sortable placeholder height problem
JqueryJquery UiJquery Ui-SortableJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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());
}
});
Solution 2 - Jquery
Have you tried setting the forcePlaceholderSize:true
property? Have a read on the jQuery UI Sortable documentation page.
Solution 3 - Jquery
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);
}
});
Solution 4 - Jquery
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.
Solution 5 - Jquery
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.
Solution 6 - Jquery
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