Resizable columns with Angularjs

Question

I have two columns that I would like to be resizable (whereby one gets wider the other becomes narrower) but I'm not really sure how to go about it. I have setup this fiddle: http://jsfiddle.net/4kyoyazq/

I have three columns at the moment, with one called "handle" that sits above (z-index) the others.

//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 the two column divs in the directive so that if I drag the handle div I can change the widths 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
              });
          }
      };
});

You mean the directive part? that's where I'm stuck - any pointers would be useful — tommyd456, Aug 26 '14 at 13:17

score 13 · Answer 1 · edited Aug 30 '15 at 10:10

This might be not exactly what you are looking for. But in my app it works pretty well.

The directive is a wrapper for this jquery plugin: colResizeable

It works by using a table layout instead of divs.

The directive for angular is:

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 is:

<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/handle icon is generated randomly in this example)

A working plunker is here

Do you have a solution for table created dynamically (`` ) and with data from async request http://plnkr.co/edit/1OF8Uv4VlXRfeosvt9HV?p=preview — akn, Aug 20 '15 at 07:03

score 0 · Answer 2 · answered Jan 28 '20 at 06:25

You must set value in timeout function for this 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');
      }
    });
  //set timeout value
  }, 1000);
}
};

Because some time that directive not working without that timeout

Resizable columns with Angularjs

2 Answers2

Linked