CODEWITHSUNDEEP
cssjquery-ui
Arun P Johny
Arun P Johny

Reputation: 388416

<ul> with overflow-y: auto and <li>s with relative position behaves oddly

I've the following mark up

<div class="row-fluid">
    <div class="span4">
        <ul class="test">
            <li>Arun</li>
            <li>Krishna</li>
            <li>Soundar</li>
        </ul>
    </div>
</div>

And css

.test {
    height: 500px;
    margin-top: 10px;
    overflow-y: auto;
    padding: 10px 4px 70px;
}

And script

$('.test li').draggable({
    revert: 'invalid'
})

If you drag the items to the right side, it disappears, I don't know why it is behaving so.

If the overflow-y: auto; style is removed from .test it works fine.

Demo: Fiddle
You may have to increase the width of the preview tab because of the responsive css to replicate the issue in the fiddle

Upvotes: 7

Views: 1378

Answers (4)

Ramin Bateni
Ramin Bateni

Reputation: 17425

Just during drag, wrap dragged element by a div include position:absolute style.

So instead this code:

$('.test li').draggable({
    revert: 'invalid'
})

Use this one:

$('.test li').draggable({
    revert: 'invalid',
    start: function(event, el){
          $(el.helper[0]).wrap( "<div style='position:absolute;'></div>" );
     },
    stop: function(event, el){
          $(el.helper[0]).unwrap();
     }
});

Live Demo

Upvotes: 0

mdenton8
mdenton8

Reputation: 616

I know this is an old question, but I think I found an answer. The reason the list disappears is because you drag it off the edge of the div and it begins to auto scroll. So, you you just remove it from the flow of the page when it is clicked on, like so:

$('.test li').draggable({
    revert: 'invalid'
}).mousedown(function() {
    var that = $(this);
    //create div to fill the vacated space
    $div = $('<div></div>');
    $div.width(that.width());
    $div.height(that.height());
    $div.insertAfter(that);
    //remove from flow of the page, set a different background color to see it work
    that.css({'position':'absolute'});
});

New fiddle here

Upvotes: 2

MarmiK
MarmiK

Reputation: 5785

All you required was, the 'min-width:1100px', and 'width:100%;'

I have updated fiddle for you 

 Fiddle Link : http://jsfiddle.net/br57F/5/

Its working fine. overflow works with content, while draggable, will not add content to parent div. it will just change position in run time of the element.

I hope this will do :)

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

The problem with the CSS on bootstrap-combined.min.css. It sets some width due to that it causes the issue.

So remove bootstrap-combined.min.css and try.

Refer LIVE DEMO

UPDATE:

Add border: 1px solid; to your .test class then you will see the actual difference, why it is working if you comment overflow

If you debug on firebug, you will see below CSS class (that is from bootstrap-combined.min.css) is causing your issue

.row-fluid .span4 {
    width: 31.4917%;
}

Upvotes: 0

Related Questions