Databases
StackOverflow2013
Postsdbo
POjQueryUI sortable floating items in connected lists height issue and flickering WON'T WORK
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQueryUI sortable floating items in connected lists height issue and flickering WON'T WORK
    text
    copied!<p>I have two connected lists, #gallery and #trash. When you drag the items around in the #gallery, its smooth and no flickering.</p> <p>I want to be able to drag from #trash to gallery. However it does not let you do this. You have to drag the item to the top of the #gallery then it becomes active again and then allows you to drag the item around.</p> <p>This happens because of the ul having a height of 0 when float: left is enabled on all of its child elements. Adding overflow: hidden to the ul will fix this but will reintroduce the flickering.</p> <p>No matter what I try i cant seem to get the two working together. I want to be able to drag from #gallery to #trash and drag around in each div individually with NO flickering.</p> <p>I have a full demo below: <a href="http://jsfiddle.net/w3vvL/67/" rel="nofollow">http://jsfiddle.net/w3vvL/67/</a></p> <p>As you will see you cant drag up from #tash to #gallery unless you drag it to the very top of #gallery.</p> <p>I have tried changing the float left to inline-block = This works.... but the flickering coems back so no success.</p> <pre><code>#gallery li{display: inline-block;} #trash li{display: inline-block;} </code></pre> <p>Also tried giving the ul a height but it introduces the flickering again!</p> <p>I have been told of the clearfix solution. Solution is to add clearfix on ul ( I.E. with :after and :before) but what i have tried didnt work (unless im doing it wrong.)</p> <pre><code>#gallery:after { clear:both; content:'.'; display:block; height:0; line-height:0; font-size:0; visibility:hidden; padding:0; margin:0;} </code></pre> <p>Also found this, but not sure if this would help:</p> <pre><code>activate: function(en, ui) { // do something here, height, float, inline, overflow etc? }, deactivate: function(en, ui) { // then do something here }, </code></pre> <p>Any help would be REALLY appreciated. Hope someone can put me out of my pain with this! I have tired everything i can think of.</p> <p>Cheers</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload