Alvins
Alvins

Reputation: 887

JQuery-UI Sortable Bootstrap Last col bug

I'm using jquery-ui sortable in a boostrap3 grid layout:

<section class="slice">
    <div class="container">
        <div class="row" id="blockcontainer">
            <div class="block col-md-3">A</div> 
            <div class="block col-md-3">B</div> 
            <div class="block col-md-3">C</div> 
            <div class="block col-md-3">D</div> 
            <div class="block col-md-12 pull-left">E</div>  
        </div>
    </div>
</section>   

Here is the JSFiddle: http://jsfiddle.net/99on7Lyt/show/

When I drag&drop the last col-md (D in the example) it starts moving in a wrong position, from the second row instead of the upper right corner. All other cols works fine. How can i fix?

Edit: The bug is only on Firefox.

Upvotes: 2

Views: 447

Answers (1)

ingalb
ingalb

Reputation: 168

Try to add a padding on blockcontainer id:

#blockcontainer{
       padding:5px;    
}

Here is the jsfiddle with the fix: http://jsfiddle.net/99on7Lyt/9/show/

Upvotes: 4

Related Questions