angular js directive for resizing with jquery ui cannot set maximum width

Question

here is the angularJS directive using jquery UI. I want to set maximum width of the element that can be resize within the resize function. How does that possible?

 app.directive('resizable', function () {

        return {
            restrict: 'A',
            scope: {
                callback: '&onResize'
            },
            link: function postLink(scope, elem, attrs) {
                elem.resizable({ grid:200,  handles: 'e,w'});
                elem.on('resize', function (evt, ui) {


                            scope.$apply(function() {   
                                if (scope.callback) { 
                                    scope.callback({$evt: evt, $ui: ui }); 


                                    //here is where I want to set maximum width


                                } 
                            })



                });


            }
        };
    });

n00dl3 · Accepted Answer · 2016-05-13 10:44:01Z

1

According to API docs you just have to set the maxWidth option :

$( ".selector" ).resizable({
  maxWidth: 300
});

You can also call it dynamically :

$( ".selector" ).resizable( "option", "maxWidth" );

the fact is if you call it from the resize event handler, I think the change will only affect the next trigger.

edited May 13, 2016 at 10:44

answered May 13, 2016 at 9:33

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

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

6 Comments

Manoj Sanjeewa Over a year ago

yes we can set maximum width like that. but what i need is i want to set the maximum width dynamically within the resize function.

n00dl3 Over a year ago

ok, so WHY do you want to do that, because it seems a bit hazardous..?

Manoj Sanjeewa Over a year ago

i want to get the element width from ui object like ui.size.width and according to that value I have to change the maximum resizable width.

n00dl3 Over a year ago

the problem is that the change will affect the next resize event not the current one

Manoj Sanjeewa Over a year ago

we can set it like this ui.size.width < maxwidth

|

Collectives™ on Stack Overflow

angular js directive for resizing with jquery ui cannot set maximum width

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related