Breaks with absolute positioning

[gallarotti]

I built two Plunkers which I want to share with you to explain the issue I am having.

The first one works fine: http://plnkr.co/W5aynxauydHInTC1I1JY

If you try dragging cards from one list to the next one, the card is rendered during the drag.

In this first scenario, the DIV that build each list is the following:

<div class="list-wrapper">
    <div class="list-header">
        <h3>To Do {{title}}</h3>
    </div>
    <div class="connectedSortable list-scrollable" ui-sortable="sortableOptions" ng-model="todoItems">
        <div class="well well-sm" ng-repeat="item in todoItems">{{item}}</div>
    </div>
    <div class="list-footer">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="new card title">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Add</button>
            </span>
        </div>
    </div>  
</div>

and the related CSS is the following:

.list-wrapper {
    width: 250px;
    float: left;
    margin: 0px 5px 0px 5px;
    background-color: #fefefe; 
    border: solid 1px #e3e3e3;
    border-radius: 3px;
    box-shadow: 0px 0px 5px #eee;
    padding: 10px;
}

.list-header h3 {
    width: 100%;
    font-size: 15px;
    line-height: 18px;
    margin: 0 0 5px 0;
}

In the second Plunker, I introduced some CSS absolute positioning on the DIVs that contain the list of cards to push the "add button" at the bottom of the screen, and now ui-sortable doesn't work anymore: http://plnkr.co/BAVkGBeyXVV5S44ajkGO

This is how the DIV for each list was modified:

<div class="list-wrapper">
    <div class="relative-to-this">
        <div class="list-header">
            <h3>To Do {{title}}</h3>
        </div>
        <div class="connectedSortable list-scrollable" ui-sortable="sortableOptions" ng-model="todoItems">
            <div class="well well-sm" ng-repeat="item in todoItems">{{item}}</div>
        </div>
        <div class="list-footer">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="new card title">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Add</button>
                </span>
            </div>
        </div>  
    </div>
</div>

and this the CSS:

.relative-to-this {
    position: relative;
    width: 100%;
    height: 100%;
}

.list-wrapper {
    width: 250px;
    float: left;
    height: 100%;
    margin: 0px 5px 0px 5px;
    background-color: #fefefe; 
    border: solid 1px #e3e3e3;
    border-radius: 3px;
    box-shadow: 0px 0px 5px #eee;
    padding: 10px;
}

.list-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 23px;
}

.list-header h3 {
    width: 100%;
    font-size: 15px;
    line-height: 18px;
    margin: 0 0 5px 0;
}

.list-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 34px;
}

.list-scrollable {
    position: absolute;
    top: 25px;
    bottom: 42px;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

Try moving cards between lists and you will see that the card is not correctly rendered while it is being dragged. Technically it works, in the sense that the cards can be moved from list to list, but the display during the drag is all wrong.

Is this a bug of ui-sortable or am I doing something wrong?

[thgreasi]

This is probably a bug of jquery-ui-sortable and out of this directive's reach to fix.
As you pointed, absolute position on the container is messing with the absolute position used for positioning the 'moving' (cloned) item.

Here is a fork of your plunk, using negative margins to achieve the same positioning effect (I'm using the background color to demonstrate that it takes the same space). If you can use Box Sizing you will be able drop the negative margins and the solution will be more flexible and maintainable.

Very well documented bug report, thanks! Feel free to Re-Open if something occurs.

[gallarotti]

Thanks for taking the time to find a solution. Yesterday night I also was trying to find a solution. I found one but wasn't as clean as yours because my misunderstanding was that I though I couldn't use absolute positioning at all, while in reality what matters is just the div that contains the cards / tasks items.
I like your solution, the only thing I don't understand is what the negative margin is for. If I remove that from the CSS everything still seems to work just fine...

[thgreasi]

I might be wrong, but I think that positioning can't be used in any ancestor of he cards, until their first common ancestor.

If you don't use css3 box sizing then negative margin should be used so that
height (100%) + paddings + margin === 100%
Otherwise you might end up with a scrollbar in the container (if overflow is set) even if the total height of cards does not exheed their container's height.

If box sizing: padding box is used, then the negative margin should be removed.