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
– tommyd456, Commented Aug 26, 2014 at 13:17

svarog · Accepted Answer · 2015-08-30 10:10:18Z

13

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

edited Aug 30, 2015 at 10:10

svarog

9,8855 gold badges66 silver badges79 bronze badges

answered Aug 26, 2014 at 13:56

mainguy

8,3312 gold badges34 silver badges40 bronze badges

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

2 Comments

akn Over a year ago

Do you have a solution for table created dynamically (<tr ng-repeat> ) and with data from async request plnkr.co/edit/1OF8Uv4VlXRfeosvt9HV?p=preview

Bhuwan Over a year ago

@mainguy hi have you made this work with div tables ?

Manchanayakage Shalika Prasad · Accepted Answer · 2020-01-28 06:25:21Z

0

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

answered Jan 28, 2020 at 6:25

Manchanayakage Shalika Prasad

1192 silver badges11 bronze badges

Collectives™ on Stack Overflow

Resizable columns with Angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related