Nebular: set the width of ngbModal

[muysewinkel]

Issue type

• [ ] bug report
• [x] feature request

Issue description

Current behavior:

I want certain modals to be larger then the current 800px.

I tried several things
1) add a custom windowClass

const activeModal = this.modalService.open("<p class='bthings'>Add Sim</p>", { size: 'lg', container: 'nb-layout', windowClass:"huge" } );

2) just try to overwrite the max-width value

in the scss of the component I added:

@import '../../../@theme/styles/themes';
@import '~@nebular/theme/components/card/card.component.theme';



// Example usage
@mixin nb-b-modals-theme() {
    .modal-lg{
        max-width:1000px;
    }
}

.huge > .modal-dialog {
    max-width: 1490px !important;
    min-width: 971px !important;   
    width: 95% !important;
}

The modal always keeps its 800px size and the styles do not appear in the element styles when you inspect the element.

[jayrajkachariya]

That's because NgbModal allows only two types of modal with size : 'sm' and 'lg'.
Custom styling is not allowed.

I also faced this problem.

[muysewinkel]

I understand that there are only two sizes of modals, but I would have expected the ability to change this using CSS.

[AndyCyberSec]

in your component add the following:
import { ViewEncapsulation } from '@angular/core';

below style inside component decorator:
encapsulation: ViewEncapsulation.None

this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });

.modal-lg { max-width: 1490px !important; }

[aefox]

This can be closed I guess since this question is not relevant anymore since now nebular supports NbDialogService and the component that gets rendered can be completely customized as needed