how to customize modal width in angular UI bootstrap

Question

so far to cutomize modal width i have done this

     var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'AddProtocolElement',
        controller: 'ProtocolElementDialogController',
        backdrop: 'static',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });

and override its modals lg attribute as

    .modal-lg{
    width:1100px !important
    }

it is fine but now what I needed is to have multiple customized lg sized modals on same screen. Here is HTMl

    <script type="text/ng-template" id="AddProtocolElement">
                        <form name="elementForm" id="elementForm" action="#" novalidate class="form-horizontal" role="form">
                            <div class="modal-header ">
                                <h3 class="modal-title">{{formHeading}} Protocol Element</h3>
                            </div>
                            <div class="modal-body">

                            <!-- here goes the body -->
                            </div>



                            <div class="modal-footer ">
                                <!-- here goes the footer -->        

                            </div>

                        </form>

There should never be more than one modal on the screen at one time, it breaks basic UI assumptions. — Johannes Jander
– Johannes Jander, Commented Dec 14, 2015 at 15:23

Adascript · Accepted Answer · 2016-02-17 16:57:06Z

1

To adjust modal with add to your css:

.adjustwidth .modal-dialog{
   width: 5000px; 
  }

Then add the class to the property windowClass where you instance the modal

var modalInstance = $modal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'AddProtocolElement',
    controller: 'ProtocolElementDialogController',
    backdrop: 'static',
    windowClass: 'adjustwidth',
    size: 'lg',
    resolve: {
        items: function () {
            return $scope.items;
        }
    }
});

answered Feb 17, 2016 at 16:57

Adascript

647 bronze badges

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

1 Comment

sam Over a year ago

thanks alot it is really helpful although I managed it through something else but it is really nice. Thanks

user5678482 · Accepted Answer · 2015-12-14 15:11:37Z

0

try width = 150px in JavaScript. This should work without jQuery.

answered Dec 14, 2015 at 15:11

user5678482

3 Comments

user5678482 Over a year ago

Not sure if this is the best solution.

itsols Over a year ago

Please include an example of how you'll actually do this in JavaScript. Give at least a complete statement and not just a suggestion. The questioner seems to have trouble understanding the syntax (IMO).

Sterling Archer Over a year ago

150px is supposed to be a string. 150px without quotes is not a valid number

Collectives™ on Stack Overflow

how to customize modal width in angular UI bootstrap

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related