Skip to content
Permalink
Browse files

Sortable: modified the contents of placeholder to a single " ". …

…Fixed #8135 - sortable: Horizontal sortable shifts causes elements to shift down.
  • Loading branch information...
bertterheide authored and scottgonzalez committed Feb 24, 2012
1 parent 58a5e23 commit b6e1f25ab8c038306146a6ead041dc18bfb9e8c2
Showing with 1 addition and 1 deletion.
  1. +1 −1 ui/jquery.ui.sortable.js
@@ -660,7 +660,7 @@ $.widget("ui.sortable", $.ui.mouse, {

var el = $(document.createElement(self.currentItem[0].nodeName))
.addClass(className || self.currentItem[0].className+" ui-sortable-placeholder")
.removeClass("ui-sortable-helper")[0];
.removeClass("ui-sortable-helper").html(" ")[0];

if(!className)
el.style.visibility = "hidden";

9 comments on commit b6e1f25

@shuckster

This comment has been minimized.

Copy link

replied Apr 18, 2012

The .html() call clobbers the width/height on the placeholder for both my horizontal and vertical sortables.

To fix it without reverting the nbsp insertion I had to add these lines underneath:

            .removeClass("ui-sortable-helper").html(" ")[0];

        el.style.width = self.currentItem[0].style.width;
        el.style.height = self.currentItem[0].style.height;
@bertterheide

This comment has been minimized.

Copy link
Contributor Author

replied Apr 18, 2012

Well, I am using both and I haven't had any of these problems. Are you sure it's not a CSS fault?

@scottgonzalez

This comment has been minimized.

Copy link
Member

replied Apr 18, 2012

@shuckster I can confirm that this is a regression. It can be seen in our sortable tabs demo.

@bertterheide

This comment has been minimized.

Copy link
Contributor Author

replied Apr 18, 2012

It seems that i defined the placeholder in my CSS, so in my case it does work.

@shuckster

This comment has been minimized.

Copy link

replied Apr 18, 2012

@scottgonzalez Yes, I'm seeing the same thing.

@Bertjh Nothing special in the CSS. There is some colour and padding information that's pulled in from a class-tag, and the width/height information using the style-tag. (There's also a float-left for the horizontal lists, of course). I do have a "position: relative;" set on each list-item, but I've just tested it and it makes no difference.

EDIT: Just saw your new comment. I can indeed set a stylesheet for "ui-sortable-placeholder" that fixes the problem, but I have list-items that can vary in size during the lifetime of the app so that's not a flexible solution for me.

@scottgonzalez

This comment has been minimized.

Copy link
Member

replied Apr 18, 2012

@Bertjh I'm inclined to revert this change since it caused a regression and your use case has an easy workaround. Do you have any ideas for how to fix the regression and your use case at the same time?

@bertterheide

This comment has been minimized.

Copy link
Contributor Author

replied Apr 19, 2012

I fixed the problem by changing the "_update" function to

// 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
// 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
if(className && !o.forcePlaceholderSize) return;

//If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
p.height(self.currentItem.height()).width(self.currentItem.width())

at line 680. Can you confirm?

@scottgonzalez

This comment has been minimized.

Copy link
Member

replied Apr 19, 2012

Yeah, that fixes it. I had thought the same thing originally, but was afraid that the checks were there for performance reasons. Digging into the code some more, it seems like the calls to update() are in appropriate places and this should be fine. Someone actually just filed a bug about this a few minutes ago :-P.

@scottgonzalez

This comment has been minimized.

Copy link
Member

replied Apr 19, 2012

I landed the fix in 4f19289 and marked @Bertjh as the author.

Please sign in to comment.
You can’t perform that action at this time.