javascript - Change uib-modal size dynamically -

i wondering best way, if possible change size of uibootsrap modal on fly. have implemented paging of sorts within same modal body, if user presses 'next' button in footer of modal, load in template, so:

<div id="rule-values-page"     ng-show="rcw.page ==='rule values'">      <first-template-values ng-show="rcw.provider=== 'first template'"         rule-fields="rcw.fields"></first-template-values>      <second-template-values ng-show="rcw.provider === 'second template'"         rule-fields="rcw.fields"></second-template-values>      <third-template-values ng-show="rcw.provider=== 'third template'"         rule-fields="rcw.fields"></third-template-values>  </div> 

there javascript behind scenes determines happens when next button clicked (above approximation of looks like). when launch original modal contains previous page leads one, use

var rulemodaltemplate = {         templateurl: 'app/indicator/rule-create-wizard.html',         backdrop: 'static',         controller: 'rulecreatewizard',         controlleras: 'rcw',         windowclass: 'app-modal-window',         resolve: {           rulecreatewizardcontrollerinput: function() {             return {               name: vm.name,               desc: vm.description             };           }         }       }; 

the key here being windowclass can set size whatever want there sm, lg, or custom have. issue have size okay of subsequent pages, looks silly other pages. want able control size whenever. done applying ng-class or modal body? appreciated.

edit: went down ng-class route , having trouble. tried apply ng-class template being called previous directive 'app/indicator/rule-create-wizard.html' so:

<div id="rule-create-wizard"     ng-form="ruleformmaster"     ng-class="rcw.modalsize()">     ... </div> 

and let decision of class applied in method modalsize() method looks :

function modalsize() {   switch (vm.page) {     case 'rule provider selection':       return 'app-modal-window-sm';       break;     case 'rule selection':       console.debug('in rule selection modal size method');       return 'app-modal-window-lg';       break;   } } 

just returning string of css class :

.app-modal-window-lg .modal-dialog {   width: 65%; }  .app-modal-window-sm .modal-dialog {   width: 20%; } 

the issue isn't applying modal, because directive modal doesn't have access (i believe) root instance of html of modal. see picture below:

it applying correctly (though not thought) template, not actual modal. if use default values uibootstrap inside of calling directive windowclass: sm etc appears in correct location (blue arrow in pic) not in highlighted location.

still looking input - thanks!

okay after comparison regular bootstrap (non-angular) modal questions, found using jquery provided simple solution. might not optimized works use case.

also keep in mind, if looking similar isn't best (if @ all) ux, fit requirements working with.

anyways, passed in dummy class sure unique windowclass parameter of uib-modal - in case app-dummy initial class in wanted apply modal app-modal-window-md:

  var rulemodaltemplate = {     templateurl: 'app/indicator/rule-create-wizard.html',     backdrop: 'static',     controller: 'rulecreatewizard',     controlleras: 'rcw',     windowclass: 'app-dummy app-modal-window-md',     resolve: {       rulecreatewizardcontrollerinput: function() {         return {           name: vm.name,           desc: vm.description         };       }     }   }; 

then created resize() method called during page changes inside of modal:

function resize() {   switch (vm.page) {     case 'rule provider selection':       $('.app-dummy .modal-dialog ')         .css({           'width': '30%'         });       break;     case 'rule selection':       var test = $('.app-dummy .modal-dialog ')         .css({           'width': '40%'         });       break;     case 'rule values':       $('.app-dummy .modal-dialog')         .css({ 'width': '70%' })       break;   } } 

the jquery targets app-dummy class each time on page change , depending on page apply width. needs weren't complex more robust, question being asked solution.