How do I increase modal width in Angular UI Bootstrap

Question

I am creating a modal   var modal    modal open                       templateUrl    partials welcome                       controller   welcomeCtrl                       backdrop   static                       scope   scope                        is there a way to increase its width

User · Answer

Use max-width on modal-dialog for angular 5

.mod-class .modal-dialog {
    max-width: 1000px;
}

and use windowClass as others recommended, TS eg:

this.modalService.open(content, { windowClass: 'mod-class' }).result.then(
        (result) => {
            // this.closeResult = `Closed with: ${result}`;
         }, (reason) => {
            // this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

Also, I had to put the css code in global styles > styles.css.

User · Answer

You can specify custom width for  modal-lg class specifically for your popup for wider viewport resolution  Here is how to do it   CSS    media  min-width  1400px        my-modal-popup  modal-lg          width  1308px                   JS   var modal    modal open       animation  true      templateUrl   modalTemplate html       controller   modalController       size   lg       windowClass   my-modal-popup

User · Answer

I found it easier to just take over the template from Bootstrap-ui   I have left the commented HTML still in-place to show what I changed   Overwrite their default template    lt script type  text ng-template  id  myDlgTemplateWrapper html  gt       lt div tabindex  -1  role  dialog  class  modal fade  ng-class   in  animate             ng-style    z-index   1050   index 10  display   block    ng-click  close  event   gt            lt  --  lt div class  modal-dialog              ng-class    modal-sm   size     sm    modal-lg   size     lg                 gt               lt div class  modal-content   modal-transclude gt  lt  div gt           lt  div gt -- gt             lt div modal-transclude gt               lt  -- Your content goes here -- gt           lt  div gt       lt  div gt   lt  script gt    Modify your dialog template  note the wrapper DIVs containing  modal-dialog  class and  modal-content  class     lt script type  text ng-template  id  myModalContent html  gt       lt div class  modal-dialog   extraDlgClass             style  width    width    max-width    maxWidth    min-width    minWidth      gt           lt div class  modal-content  gt               lt div class  modal-header bg-primary  gt                   lt h3 gt I am a more flexible modal  lt  h3 gt               lt  div gt               lt div class  modal-body                   style  min-height    minHeight    height    height    max-height   maxHeight      gt                   lt p gt Make me any size you want lt  p gt               lt  div gt               lt div class  modal-footer  gt                   lt button class  btn btn-primary  ng-click  ok    gt OK lt  button gt                   lt button class  btn btn-warning  ng-click  cancel    gt Cancel lt  button gt               lt  div gt           lt  div gt       lt  div gt   lt  script gt    And then call the modal with whatever CSS class or style parameters you wish to change  assuming you have already defined  app  somewhere else     lt script type  text javascript  gt      app controller  myTest      scope     modal   function   scope   modal                    Adjust these with your parameters as needed           scope extraDlgClass   undefined            scope width    70             scope height    200px            scope maxWidth   undefined           scope maxHeight   undefined           scope minWidth   undefined           scope minHeight   undefined            scope open   function                           scope modalInstance    modal open                                backdrop   static                   keyboard  false                  modalFade  true                   templateUrl   myModalContent html                   windowTemplateUrl   myDlgTemplateWrapper html                   scope   scope                    size  size    - overwritten by the extraDlgClass below  use  modal-lg  or  modal-sm  if desired                   extraDlgClass   scope extraDlgClass                   width   scope width                  height   scope height                  maxWidth   scope maxWidth                  maxHeight   scope maxHeight                  minWidth   scope minWidth                  minHeight   scope minHeight                               scope modalInstance result then function                                  console log  Modal closed at      new Date                                function                                  console log  Modal dismissed at      new Date                                          scope ok   function   event                        if   event                   event preventDefault                 scope modalInstance close  OK                         scope cancel   function   event                        if   event                   event preventDefault                 scope modalInstance dismiss  cancel                         scope openFlexModal   function                           scope open                         lt  script gt    Add an  open  button and fire away        lt button ng-controller  myTest  class  btn btn-default  type  button  ng-click  openFlexModal     gt Open Flex Modal  lt  button gt    Now you can add whatever extra class you want  or simply change width height sizes as necessary     I further enclosed it within a wrapper directive  which is should be trivial from this point forward   Cheers

User · Answer

there is another way wich you don t have to overwrite uibModal classes and use them if needed   you call  uibModal open function with your own size type like  xlg  and then you define a class named  modal-xlg  like below     modal-xlg     width 1200px      call  uibModal open as     var modalInstance    uibModal open                                         size   xlg                     and this will work   because whatever string you pass as size bootstrap will cocant it with  modal-  and this will play the role of class for window

User · Answer

When we open a modal it accept size as a paramenter   Possible values for it  size  sm  md  lg   scope openModal   function  size    var modal    modal open         size  size        templateUrl    app user welcome html                               HTML    lt button type  button       class  btn btn-default       ng-click  openModal  sm    gt Small Modal lt  button gt    lt button type  button       class  btn btn-default       ng-click  openModal  md    gt Medium Modal lt  button gt    lt button type  button       class  btn btn-default       ng-click  openModal  lg    gt Large Modal lt  button gt    If you want any specific size  add style on model HTML    lt style gt  modal-dialog  width  500px    lt  style gt

User · Answer

You can do this in very simple way using size property of angular   modal    var modal    modal open                       templateUrl    partials welcome                       controller   welcomeCtrl                       backdrop   static                       scope   scope                      size  lg     you can try different width like  sm    md

User · Answer

Another easy way is to use 2 premade sizes and pass them as parameter when calling the function in your html  use   lg  for large modals with width 900px   sm  for small modals with width 300px or passing no parameter you use the default size which is 600px   example code    scope openModal   function  size    var modal    modal open                   templateUrl    partials welcome                   controller   welcomeCtrl                   backdrop   static                   scope   scope                  size  size                  modal result then            close         function  result                var a   result                       dismiss         function  result                var a   result                   and in the html I would use something like the following    lt button ng-click  openModal  lg    gt open Modal lt  button gt

User · Answer

I use a css class like so to target the modal-dialog class    app-modal-window  modal-dialog     width  500px      Then in the controller calling the modal window  set the windowClass        scope modalButtonClick   function              var modalInstance    modal open               templateUrl   App Views modalView html               controller   modalController               windowClass   app-modal-window                      modalInstance result then                close             function  result                    var a   result                               dismiss             function  result                    var a   result

User · Answer

If you want to just go with the default large size you can add  modal-lg    var modal    modal open             templateUrl    partials welcome             controller   welcomeCtrl             backdrop   static             scope   scope            windowClass   modal-lg

User · Answer

I solved the problem using Dmitry Komin solution  but with different CSS syntax to make it works directly in browser   CSS   media min-width  1400px        my-modal  gt   modal-lg           width  1308px            JS is the same    var modal    modal open       animation  true      templateUrl   modalTemplate html       controller   modalController       size   lg       windowClass   my-modal

[angularjs] How do I increase modal width in Angular UI Bootstrap?

Examples related to angularjs

Examples related to angular-ui-bootstrap