JQuery-UI Sortable Bootstrap Last col bug

Question

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.

ingalb · Accepted Answer · 2015-03-24 15:51:28Z

4

+50

Try to add a padding on blockcontainer id:

#blockcontainer{
       padding:5px;    
}

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

answered Mar 24, 2015 at 15:51

ingalb

1681 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery-UI Sortable Bootstrap Last col bug

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related