Opened 7 years ago

Closed 7 years ago

#10677 closed bug (duplicate)

Sortable: Should manage "top" CSS property consistently

Reported by: dma_k Owned by: dma_k
Priority: minor Milestone: none
Component: ui.sortable Version: 1.11.1
Keywords: Cc:
Blocked by: Blocking:

Description

I am using "sortable" in conjunction with "tab" plugin in common manner:

$('#tabs').sortable({
	"axis"   : 'x',
	"cursor" : 'e-resize',
	"stop"   : function() {
		tabControl.tabs('refresh');
	}
});

I have noticed that in my case tabs are not stick to the top when moved, but only first time when dragged. This happens because of the following scenario:

  1. When tab is initially constructed, it has no style: <li style="">
  2. When tab dragging is initiated, it has the following style: <li style="position: absolute; width: 159px; height: 30px; left: 362px; z-index: 1000;">
  3. When tab dragging is completed, it has the following style: <li style="position: relative; left: 0px; top: 0px;">
  4. Now when dragging is initiated again, it has the following style: <li style="position: absolute; width: 159px; height: 30px; left: 362px; top: 0px; z-index: 1000;">) and that now makes the difference in comparison with step 2.

Expected: If "sortable" plugin should manage "top" CSS property, this CSS property should be set to 0 during the initial dragging (step 2 above).

Change History (3)

comment:1 Changed 7 years ago by Scott González

Owner: set to dma_k
Status: newpending

I'm not exactly sure what problem you're trying to describe. Please provide a reduced test case showing the problem, or clearly explain what's wrong with http://jqueryui.com/tabs/#sortable

comment:2 Changed 7 years ago by dma_k

Status: pendingnew

The side effect is the following:

As sortable plugin does not set "top: 0" in step (2), in my case the tab is stuck to the bottom. However after step (3) it leaves "top: 0" and next time the tab is dragged, it is stick to the top.

It's not so easy for me to reproduce it, but for simplicity let's assume that the following style is in place:

li {
  bottom: 0;
}

comment:3 Changed 7 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #3011.
And this is why providing test cases is important, using bottom positioning changes everything.

Note: See TracTickets for help on using tickets.