How do I increase modal width in Angular UI Bootstrap?

by

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;
            });
    };

More Related Contents:

  1. Can you override specific templates in AngularUI Bootstrap?
  2. Using Bootstrap for Angular and Material design for Angular together
  3. Scope issue in AngularJS using AngularUI Bootstrap Modal
  4. angularjs share data config between controllers
  5. Invoking modal window in AngularJS Bootstrap UI using JavaScript
  6. Angular JS – Automatically focus input and show typeahead dropdown – ui.bootstrap.typeahead
  7. How do I create an AngularJS UI bootstrap popover with HTML content?
  8. Model in a modal window in angularjs is empty
  9. Angular bootstrap datepicker date format does not format ng-model value
  10. Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS
  11. Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
  12. How to use a filter in a controller?
  13. CORS with spring-boot and angularjs not working
  14. Use of ng-src vs src
  15. How to format a date using ng-model?
  16. Descending order by date filter in AngularJs
  17. angular.js link behaviour – disable deep linking for specific URLs
  18. How to write a debounce service in AngularJS
  19. Call a method of a controller from another controller using ‘scope’ in AngularJS
  20. How to read binary data in AngularJS in an ArrayBuffer?
  21. Adding http headers to window.location.href in Angular app
  22. How do I sequentially chain promises with angularjs $q?
  23. Mongo Giving ‘duplicate key error’ on non-unique fields
  24. Using ng-repeat to generate select options (with Demo)
  25. What are the differences between ng-repeat and ng-options and why do they not behave the same way?
  26. How to use `replace` of directive definition?
  27. How to highlight a selected row in ngRepeat?
  28. How to implement an ng-change for a custom directive
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. Inject module dynamically, only if required

Leave a Comment