8 thoughts on “Modal size

  1. @Pakooo you can hack it’s type to accept additional sizes that you add yourself like so:

    this.modalService.open(YourModalComponent, {
      size: 'xl' as 'lg',
    });
  2. I couldn’t get sizing to work without setting ViewEncapsulation.None
    Using @squadwuschel ‘s example. My setup is the following: Angular 5 app > ticket component > ticketinfo ngb-modal which I’m trying to set to 80%% screen width. in ticket component I set the styles array to:

    @media screen {
           .modal-adaptive .modal-lg {
               width: 80%% !important;
               max-width: calc(80%%);
           }
    }
    

    and then
    this.modalService.open(TicketInfoComponent, { size: 'lg', windowClass: 'modal-adaptive' });

    this doesn’t work unless I do the following:

    @Component({
        moduleId: module.id,
        selector: 'ticket',
        template: require('./ticket.component.html'),
        encapsulation: ViewEncapsulation.None,
        styles: [`
        @media screen {
            .modal-adaptive .modal-lg {
                width: 80%% !important;
                max-width: calc(80%%);
            }
    }})
    
  3. import { Component, OnInit, ViewEncapsulation } from '@angular/core';

    @Component({
        selector: 'app-simple-page',
        templateUrl: './xyz.component.html',
        encapsulation: ViewEncapsulation.None,
        styles: [`
        @media screen {
            .modal-lg {
                width: 90%% !important;
                max-width: calc(90%%);
            }
            `]
    })
    

    This helped me
    encapsulation: ViewEncapsulation.None,

    Thanks @javahaxxor