.sortable() adding 50px height, dispurts scrollbar

Question

I have a draggable list of elements. The only jQuery I am using is:

$('.section_rows').sortable();

This works fine. However, when I am at the bottom of the page (vertical scroll all the way at the bottom), and click a row to drag and sort it, the page 'jumps' up by 55px. While this isn't a big deal functionally, it is a terrible user experience (and the draggable rows are located at the bottom of this page, so this hiccup invariably happens).

I took a look at the HTML, and it looks like jQuery is adding a class called '.ui-sortable-helper' which contains a style with a 55px height.

Is there a way that I can disable this or force the page to 'not move' when the draggable item is selected?

Answer 1

It sounds like you need a drop placeholder to keep the list at the same height. Try:

$(".section_rows").sortable(P{
   placeholder: 'ui-state-highlight'
});

Make sure that the CSS for .ui-state-highlight is set to the appropriate height.

Answer 2

Manually add a placeholder to the sortable function ( http://jqueryui.com/sortable/#placeholder ), and style that:

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

.ui-state-highlight {
    height: 55px;
    line-height: 1.2em;
    background: rgb(250, 252, 255)!important;
    border: none!important;
}