I want to resize a pane with a min height limit.

Is it possible to get the original javascript event inside, for instance, "angular-resizable.resizeEnd"?

All in the title, nothing interesting inside "event', or 'args', the doc say something about "info.evt : original mouse event object" but its alway undefined for me.

I'm trying to use this library with Angular Material but I can't get it work.
Look at this example:
I have a row with 2 md-content, one with flex at 20% and one with flex at 80%. My objective is to enlarge (resize) the first md-content if needed.

<div layout="row">
    <md-content flex="20">
    </md-content>
    <md-content flex="80">
    </md-content>
</div>

so I tried this (and also the opposite)

<div layout="row">
    <md-content flex="20" resizable r-directions="['right']" r-flex="true">
    </md-content>
    <md-content flex="80">
    </md-content>
</div>

How can I get it to work?

Is there a way to set min height? I want my component to resize to height not lower than 300px.

Thanks,

angular-resizable is great! How would you go about saving and restoring the width/height of each resized section?

Hi,

can you please publish the recent version to npmjs?

https://www.npmjs.com/package/angular-resizable

It is like this:

Should be like this:

The resizable directive is colliding with another directive in a data-table module i am using. I have already requested them to rename it as per the best naming convention followed as discussed in this thread Directive Name Collision Issues and Best Practices #536
As it's much easier for you to do the renaming, will save me the effort of maintaining a separate fork :)
Also great plugin.

I just edited the source locally so this directive works with Angular Material's Textarea. Perhaps this could be of use or provide some hints. Perhaps not, but here it is anyway.

In order to use this with Angular Material's Textarea, the resizable attributes must be set to the <md-input-container> element:

<md-input-container class="md-block" resizable r-directions="['bottom']">
  <label>Biography</label>
  <textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
</md-input-container>

If the attributes are set to the textarea element instead, the resize hint/icon won't appear, therefore the user won't be able to resize the textarea.

So I had to change the element that the resize is done against by simply detecting the tag name of the element:

link: function(scope, element, attr) {
    var draggingElement;

    if (element[0].tagName == 'MD-INPUT-CONTAINER') {
      draggingElement = element[0].getElementsByTagName('textarea')[0];
    } else {
      draggingElement = element[0];
    }

And finally I changed element[0] for draggingElement in both updateInfo and dragging functions. That was all.

It didn't work with with the r-flex option.

There's a small detail though: when the resizing starts, the height will jump certain amount of pixels, so it's not completely smooth at first.

A Ideia, is make the param to get a model and return callback with model changed

Hello!

I am actually facing a problem.
Currently developping an app with resizable columns (so far it works), I plan to put a "condense" button which will wrap the column making it small. I tried many ways to remove the handle and so far no luck. If the handle is not removed, when I press the button, the handle does not adapt to the new content, so the handle does not move and there is a lot of space betweet that condensed column and the handle.

I hope I wasn't too confusing, anyone has an idea? Or is it actually something that isn't implemented?

Hi. The latest releases on npmjs.org and here on Github, is not in sync with the latest repo changes, I.e, the rNoThrottle feature is missing from the releases both places.

I'd like an option to disable the resize functionality. I.e. what I'm looking for is an element that is resizable when a condition is true and not when it's false (so I can use an "Edit mode" button, and my div can only be resized when editmode == true)

Nice directive! Apologies if this is easy, still pretty new to Angular!

I wondered if its possible to return the width in percentage form?

Thanks for the great directive. I've played with your library somewhat and found a few issues that I've fixed. However, unfortunately my corporate firewall doesn't allow me to submit a PR, so I will highlight them here:

1. 'rg-top' has an incorrect 'left' value. 'left' should change from 50% to 0.

2. Dragging can cause the selection of elements in the panel. This can be disabled by adding the following to the bottom of dragStart:

           if(e.stopPropagation) e.stopPropagation();
           if(e.preventDefault) e.preventDefault();
           e.cancelBubble=true;
           e.returnValue=false;
   

3. If you have height or width animations on the resizable div, it won't work smoothly. To fix this, add a no-transition class to the css:

   .resizable.no-transition {
   transition: none !important;
   }
   

   Then toggle it on in dragStart, and toggle it off in mouseup using the element.add/removeClass();

Trying to nest rows for some complex layouts that have resizable rows inside the parent row.
Here's an example:
http://codepen.io/joesaad/pen/wGPxem

Hi, I have defined my resizable sectionthis way:

@Reklino I was wondering if you want another dev to continue updating the gem, I can help with that, let me know and I can create a fork and start merging those PRs and adding new features

I tried to implement this with the following. I'm not familiar with flexbox so I ignored that, but something along these lines would be great.

            scope: {
                rDirections: "=",
                rCenteredX: "=",
                rCenteredY: "=",
                rWidth: "=",
                rHeight: "=",
                rFlex: "=",
                rGrabber: "@",
                rMinWidth: "=",
                rMinHeight: "="
            }
....

switch(dragDir) {
                        case 'top':
                            var newHeight = h + (offset * vy);
                            if(scope.rFlex) { element[0].style.flexBasis = newHeight + 'px'; }
                            else {            if(!scope.rMinHeight || ( newHeight > scope.rMinHeight)) { element[0].style.height = newHeight + 'px'; } }
                            break;
                        case 'right':
                            var newWidth = w - (offset * vx);
                            if(scope.rFlex) { element[0].style.flexBasis = newWidth + 'px'; }
                            else {            if(!scope.rMinWidth || ( newWidth > scope.rMinWidth)) { element[0].style.width = newWidth + 'px'; } }
                            break;
                        case 'bottom':
                            var newHeight = h - (offset * vy);
                            if(scope.rFlex) { element[0].style.flexBasis = h - (offset * vy) + 'px'; }
                            else {            if(!scope.rMinHeight || ( newHeight > scope.rMinHeight)) { element[0].style.height = h - (offset * vy) + 'px'; } }
                            break;
                        case 'left':
                            var newWidth = w + (offset * vx);
                            if(scope.rFlex) { element[0].style.flexBasis = newWidth + 'px'; }
                            else {            if(!scope.rMinWidth || ( newWidth > scope.rMinWidth)) { element[0].style.width = newWidth + 'px';} }
                            break;
                    }

Is there a way to constrain proportions to a specified width and height? I'm looking to define an initial width/height but they can resize it constrained.

Am i overlooking an option? If not maybe i can add it.

Hi I'm curious if you have a suggestion for using your directive with ngRepeat. Specifically I want drag handles to the right of each box, except for the last one, but I see no way of disabling the directive on the last element?

Hi, me again!

I've got some resizable panels whose height can change prior to them being resized. This results in the w/h values being incorrect because they're not updated until the mouseup event is captured. Is there any reason why these aren't set in dragStart? This also negates the need for them to be set on mouseup.

If you grab the vertical grabber above the image on http://codepen.io/Reklino/full/raRaXq/ and drag it up, eventually it will appear over section#two. This is exacerbated if there is a min-height on the element. It should always be shown beneath with no overlap.

Would it be possible to create a new release at commit 6d0fbc7 ?

I just want to say this is a really great project and I've been finding it very helpful. I'm just having a problem with my scrollable content. I'm using a flex row layout with two div's side by side. Both are scrollable with overflow: auto in their styling.
This issue arises when I add the resizable direcitve to the left div and setting the drag direction to right. The appended rg-right div appears under the scrollable area and the user first has to scroll to it to use it. When the content is resized the width of the enitire div stays longer than the scrollable area and the scrollbar stays.
When I tried to add the directive to the right content I could not see the drag-bar at all.
Do you perhaps have a solution for this?

Fails when using with Angular 1.5 component directives:

Error: [$compile:multidir] Multiple directives [myComponent, resizable (module: angularResizable)] asking for new/isolated scope on: <my-component resizable="resizable" r-directions="['bottom', 'right']" r-flex="true">

Hi,

the bower.json states that angular-resizable works with Angular 1.3, which leads to a resolution request by bower when you do a bower install in a project which uses Angular 1.4.
Because I doubt that there are real compatibility problems with Angular != 1.3 (and Angular < 2) I would recommend to set the version statement in bower.json to 1.*.

@Reklino - could flexbox + angular-resizable + ui grid produce a resizing ui grid that can shrink?

I would like the ability to use a full template in rGrabber so that I can do things like add ngClick functionality to elements within the grabber.

Hi,
Have any option for how object will be resize. I mean I just want to resize the left side while keep right side.
like your demo
http://codepen.io/Reklino/pen/zGxXxa

Thank!!

Hello everyone,

I have a problem that is demonstrated in the following example:
http://codepen.io/x3p8z/pen/BKXBPx

In this example, only line 21 in the JS file is changed from the original demo to:
$scope.dynamicSize.height = 50;

The expected behavior is that after every vertical resize, the size is reset to 50 px. This works the first time, but not for the following resize operations. While the value in the bottom left box is shown correctly as 50 all the time, the box has a different dimension.

I appreciate any inputs and hints how to achieve the desired behavior!

When you have a relative size in an inline CSS attribute, for example

<div resizable r-directions="['left']" style="width: 70%">
  …
</div>

the resize events do not convert the size into the proper absolute size.

I've spent an hour or so trying to figure out why the resizer was sticking on some occasions. If you click the resizer, and quickly move it while letting go of the mouse over an iframe, the mouseup event never gets called. That means if you want to release the resizer, you have to click again.

I've tried a quick few hacks to fix this, and I can't see how to do it easily if you're using a cross-origin iframe. The only thing I can think of, is to add an element to cover the entire screen while dragging, to make sure the events are raised on the current document.

Any ideas? If not, I'll try and make the modifications and submit the code here.

I'd like to remove the two line grabber, I tried not including the .css file but that didn't work.

Okay, so I'm not sure what I'm doing wrong, but bower install seems to keep pulling this component with angular#~1.3.15, when on the repo it says "angular": "~1.*"

Hi,
We are trying to implement the flexible dashboard for our requirement. we are using the packery to have the backfill of the cards when a card is removed or for reshuffling the cards on the dashboard.

We are trying to implement the resize functionality as how in this directive is used, on the top of packery.

We are using the below packery angular directive from git hub, this directive wraps the packery functionality, but not exposing the resize functionality for a card (Widget)

https://github.com/Dilatorily/packery-angular
http://dilatorily.github.io/packery-angular/#/api/packery-angular

Can you please shed some light on this, any suggestions on how to accomplish this on the top of packery using angular.

Thanks in advance.

What about to call this function:
$scope.$on("angular-resizable.resizeEnd", function (event, args)

when I resize not a resizable container, but a browser window?

Hi, in the project I am working on I need to bind resizing to a grid, resizing the element only by discrete steps.
I introduced few minor changes into your source code (mainly a new scope param "rGrid", which accepts an x,y grid size array).

If you agree, I would like to submit you the code for a review, maybe through a pull request or putting the code somewhere online.

I also noticed a slight difference in the value of "width" returned by

w = parseInt(style.getPropertyValue("width"));

inside

var dragStart = function(e, direction) {}

I then decided to retrieve it by using:

var elRect = element[0].getBoundingClientRect();
 w = parseInt(elRect.width);

What do you think?

Thx!

Add information at README.md about rDisabled functional with examples. http://codepen.io/anon/pen/LGLNpX

I've got angular-resizable working very well on my app, thank you! Now I'm trying to wire it up to user preferences; e.g. a user can change the orientation of resizable panels on the page.

Using this, r-directions="[(preferences.orientation === 'vertical' ? 'bottom' : 'right')]", I am able to set the orientation correctly on the initial page load (preferences is an object stored in localStorage), but I don't see a way to make angular-resizable respond to changes to that scope property after the initial load. Is there a way to make angular-resizable re-render itself?

Thanks!

Since Safari <=8 still uses the vendor prefix webkitFlexBasis, resizing doesn't work.

Solution would be to do feature detection and choose the correct property.

I have used the angular-resizable in our webapp which is working fine on IE10+ browsers but when i try to run the app on IE10, 9 and 8 , the splitter stops working. So just want to get confirmation that the angular-resizable is compatible with those versions of internet explorer or not.

And what will be the possible ways to make it working on lower versions of IE. Thanks in advance.

I would like to know if possible to retrieve scope model inside resizeStart/resizeEnd events.
For instance: I am using angular-resizable inside a ng-repeat, and I would like to operate on the underlying model on resizeEnd.
Is it possible to add custom params to resize events?
Obviously, we always have the option of something like: angular.element(e.target).scope()...
Or maybe it's simpler just to wrap the resizable object into a directive linked to the model (which is maybe the best solution).

Thank you very much!

I was trying to resize a table inside of a resizable container by trying to hook into the 'resizeEnd' event.

My solution was to catch the event at the top controller and then $broadcast an event.

Would it be better if this component also broadcasted these events instead of having them to echo back?

I like this library. However when I put any few paragraphs inside any of the containers and start resizing, the content starts overflowing out of the section tag. I have tried changing the overflow property but that didn't work. Example is here: http://codepen.io/joesaad/pen/jqLpdE

• "main": "src/angular-resizable.js",
• "main": [
  "angular-resizable.min.css",
  "angular-resizable.min.js"
  ],

Hello,

There seems to be an issue with - at least - Chrome when trying to resize an panel, is there anyone else who ran into the same problem ?

Thank you !

M

EDIT : Bower version has no touch support. Sorry.

Sorry, me again! Just tried to pull the NPM package, and it appears the directive is registered to a module called 'app'. This means the usage instructions don't work :/

I've renamed 'app' to 'angularResizable' and then referenced that in my app module.

Can you please support touch from mobile devices?
basically need to add the touchstart, touchend and touchmove when registering to events and removing registration, you can use the following event strings instead of the existing:

touchstart mousedown
touchmove mousemove
touchend mouseup