Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Bootrstrap Modal form - moving and sizing
Message
From
25/06/2015 08:51:37
 
General information
Forum:
Javascript
Category:
Other
Miscellaneous
Thread ID:
01621411
Message ID:
01621442
Views:
43
This message has been marked as a message which has helped to the initial question of the thread.
>>>Hi everybody,
>>>
>>>Looking at the documentation and samples for the Modal dialog at https://angular-ui.github.io/bootstrap/ it seems like two important properties are missing - the ability to move the Modal form or resize it. Do you know if somehow it's possible?
>>>
>>>Thanks in advance.
>>
>>As per Borislav's link you can apply the jquery .resizable() (and/or the .draggable()) function.
>>
>>If you are using the ui.bootstrap.modal and want to open the modal at a specific size you can use the .windowClass option on the open() method to specify a size:
>>http://stackoverflow.com/questions/21311736/how-do-i-increase-modal-width-in-angular-ui-bootstrap
>>
>>At a cruder level there is the size option which allows you to choose between standard bootstrap sizes (sm etc)
>
>We're using AngularJs $modal service and we have our own modal-popup directive. I want the opened window to be resizable and draggable.
>
>Our current code to open that dialog is this:
>
>
>var modal = $modal.open({                            
>                            scope: $scope,
>                            templateUrl: ($scope.modalTemplate != null && $scope.modalTemplate.length > 0) ? $scope.modalTemplate : '/app/templates/modalAddOn'
>                        });
>
>                        modal.result.then(function (result) {
>                            $scope.okAction();
>                        });
>
>So, I am wondering if it's possible to somehow just add extra options here to achieve that effect. If not, how can we incorporate the jquery into that code.

Haven't tried it but, AFAICS, it's just a question of identifying the modal in the dom and, as Borislav suggests, applying the jquery Resizable widget:
http://api.jqueryui.com/resizable/
Few interesting options there (aspectRatio, max/min height/width etc.)

Ditto the Draggable widget: http://api.jqueryui.com/draggable/
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform