1

I'm trying to change the size of my ng-bootstrap modal, and I tried a lot of methods including this and this but nothing is working for me !, so can anyone give me some hints on how to control the width of the ng-bootstrap modal in angular2. Thanks

Ch_y
  • 356
  • 1
  • 4
  • 16
  • Have you tried CSS, prepending the rule :host /deep/ at the beginning of the CSS rule? – Rob Zuber Jun 20 '17 at 10:19
  • that didn't work too ! – Ch_y Jun 20 '17 at 10:33
  • 1
    get bootstrap modal dialog class and then overerite it. you can user /deep/ before class name – Ketan Akbari Jun 20 '17 at 10:34
  • First experiment within the browser dev tools (I suggest the Chrome browser). You can highlight the element directly and apply a CSS rule right within the dev tools (no need for :host /deep/ when using the dev tools). Once you find something that works, use that same rule in your component, prepending :host /deep/ We'd probably have to see sample code to help more. – Rob Zuber Jun 20 '17 at 10:39
  • Thanks, @KetanAkbari – Ch_y Jun 20 '17 at 10:41

1 Answers1

0

I solved this issue by adding the default bootstrap css class modal-lg to my template:

<div id="modalId" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                Body
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>

Bootstrap default sizes:

  • Small: modal-sm
  • Large: modal-lg
  • Extra large: modal-xl

Other options:

  • Vertically centered: modal-dialog-centered
  • Scrollable content: modal-dialog-scrollable
Ousama
  • 2,176
  • 3
  • 21
  • 26