Resizing a div into another column, how do I move the other divs up or down?

Question

So, I'm making a simple calendar app in angular, that you can input what you want for each day. I'm using this directive to resize the li:

myAppModule.directive('resizable', function () {
    return {
        restrict: 'A',
        scope: {
            callback: '&onResize'
        },
        link: function postLink(scope, elem, attrs) {
            elem.resizable();
            elem.on('resizestop', function (evt, ui) {
                if (scope.callback) { scope.callback(); }
            });
        }
    };
});

Now the question is how do I stop it from overlapping other divs in a different columns, while still being able to go into other columns? And if there is any content in the other column they get pushed down.

link to the application: https://fathomless-meadow-6839.herokuapp.com/

Picture of what is happening: http://cl.ly/image/3H0v0S310F1J

Answer 1

In your style.css give your input fields width:100% .

input{

 width:100%;

}

Exclude inputs you don't want to resize by using className or ID.