Editable columns with Angularjs
I have two columns that I would like to change (with one getting wider, the other getting narrower), but I'm not sure how. I installed this fiddle: http://jsfiddle.net/4kyoyazq/
I have three columns at the moment, one called "handle" that sits above (z-index) the rest.
//left col
#content {
position:absolute;
left:0;
right:250px;
bottom:30px;
top:50px;
background:red;
z-index:0;
overflow-y:scroll;
}
//right col
#menu {
position:absolute;
right:0;
top:50px;
width:250px;
bottom:30px;
background:#yellow;
}
#handle {
position:absolute;
right:250px;
top:50px;
width:10px;
bottom:30px;
background:blue;
cursor: col-resize;
z-index:5;
}
My directive is empty at the moment on the fiddle - how can I target two columns in the directive so that if I drag the div control I can change the width of the two columns?
var myApp = angular.module('myApp', []);
myApp.directive("draggable", function(){
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function () {
//do something here
});
}
};
});
source to share
This may not be exactly what you are looking for. But it works very well in my application.
The directive is a wrapper for this jquery plugin: colResizeable
Works using layout table
instead of div.
Angular directive:
myApp.directive('colResizeable', function() {
return {
restrict: 'A',
link: function(scope, elem) {
setTimeout(function() {
elem.colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip'></div>",
draggingClass: "dragging",
onDrag: function() {
//trigger a resize event, so width dependent stuff will be updated
$(window).trigger('resize');
}
});
});
}
};
And the html part:
<body>
<table style="width: 100%;height:300px" col-resizeable>
<tr>
<td style="background:red">content</td>
<td style="background:blue;width:100px">menu</td>
</tr>
</table>
</body>
Have a look at the css also. (The grip / grip icon is randomly generated in this example)
Working plunker here
source to share