ng-bootstrap Modal size
AngularNg BootstrapAngular Problem Overview
What is the best way to set/override a custom width for a modal?
It seems ng-bootstrap currently supports
> size: 'sm' | 'lg'
but Bootstrap 4 supports sm, md and lg.
Ideally I would like the modal to be responsive and adjust similar to container sizes. And on mobile have it go full screen.
EDIT: Bootstrap 4 _variables.scss seems to have a $modal-md setting but appears to be unused.
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
Angular Solutions
Solution 1 - Angular
The cleanest solution that I could find is to use the windowClass property.
I.e.:
this.modalService.open(MyModalComponent, { windowClass : "myCustomModalClass"});
Then add the following to your global CSS styles. This is important as the style won't be picked up from your components CSS.
.myCustomModalClass .modal-dialog {
max-width: 565px;
}
Solution 2 - Angular
Try like this :
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ModelComponent } from './model.component';
export class Component {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(ModelComponent, { size: 'lg', backdrop: 'static' });
}
}
Solution 3 - Angular
I found this as a good solution.
this.modalService.open(MyComponent, { windowClass: 'my-class'});
ng-deep “shadow-piercing” descendant combinator can be used to force a style down through the child component tree into all the child component views. In this case modal-dialog class.
::ng-deep .my-class .modal-dialog {
max-width: 80%;
width: 80%;
}
Solution 4 - Angular
When you don't specify the size
, the default value use $modal-md
(500px).
All the 3 modals sm, md and lg are responsive and will display on full width (with borders) on mobile.
If you really want a new size, you can use a custom size:
this.modalService.open(MyModalComponent, { size: <any>'xl' });
With a css for this class:
.modal-xl {
max-width: 1000px;
}
EDIT: the xl size is now a standard size so the CSS.
Solution 5 - Angular
add following css in style.css file.
.xlModal > .modal-dialog {
max-width: 1490px !important;
min-width: 971px !important;
width: 95% !important;
}
Note : we can replace .xlModal
with any name.
open modal with new created style.
this.modalService.open(content,{windowClass:"xlModal"});
Solution 6 - Angular
Add size xl on interface NgbModalOptions
.
export interface NgbModalOptions {
size?: 'sm' | 'lg' | 'xl';
}
Now use it while opening the modal
this.modalService.open(content, { size: 'xl' });
Solution 7 - Angular
In addition to djpalme and Kapil Thakkar answers, you will need to set the 'encapsulation' of your Component to None
as mentioned here
@Component({
selector: 'app-generic-view',
templateUrl: './generic-view.component.html',
styleUrls: ['./generic-view.component.scss'],
encapsulation: ViewEncapsulation.None
})
Solution 8 - Angular
You could wrap it into a function like
component.ts
// accepts 'sm', 'md' or 'lg' as argument.
// default argument 'md'
public openModal( dialogSize: 'sm' | 'md' | 'lg' = 'md'): void {
let modalOptions = {};
if (dialogSize === 'sm' || dialogSize === 'lg') {
modalOptions = { size: dialogSize };
} else {
modalOptions = { windowClass: 'md-class' };
}
this.modalService.open(ConfirmationDialogComponent, modalOptions);
}
component.css
::ng-deep .md-class .modal-dialog {
max-width: 80%;
width: 80%;
}
And call it like,
openModal(); //argument 'md'
openModal('sm'); //argument 'sm'
openModal('md'); //argument 'md'
openModal('lg'); //argument 'lg'
Solution 9 - Angular
Add a argument class: 'modal-lg'
open() {
const modalRef = this.modalService.open(ModelComponent, { class: 'modal-lg', backdrop: 'static' });
}
}
Solution 10 - Angular
Try this :
this.modalRef = this.modalService.show(template, { class : "modal-xl"});
Solution 11 - Angular
Ok I see a lot of partial answers here. I wanted to put what worked for me in the hopes it helps someone else.
I used Kapil Thakkar's answer and YnadW's answer to get it to work. First and foremost, you need to add the Encapsulation part in order for the classes to take hold.
@Component({
selector: 'app-generic-view',
templateUrl: './generic-view.component.html',
styleUrls: ['./generic-view.component.scss'],
encapsulation: ViewEncapsulation.None
})
Then, I needed to tweak the CSS classes a bit to get the modal properly adjusted. You have to change both the .modal-dialog and .modal-content in order to get the sizing right.
this.modalService.open(modal, { windowClass: 'custom-window-class' });
.custom-window-class > .modal-dialog,
.custom-window-class > .modal-dialog > .modal-content {
width: 80vw;
max-width: 80vw;
}