How to change ngx bootstrap modal width?
我已经尝试过如何将宽度设置为ngx bootstrap模态，但就像它是固定的一样？
这是html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true"> <button type="button" class="close" data-dismiss="modal" aria- label="Close" (click)="hide()"><span aria-hidden="true"></span> </button> <h4 class="modal-title" id="myModalLabel">Are you sure?</h4> <button type="button" id="dialog_no" class="btn btn- default btn-block" data-dismiss="modal" (click)="hide()">No</button> <button type="button" id="dialog_yes" class="btn btn- primary btn-block ladda-button" data-style="expand-right" (click)="confirm()">Yes</button> |
如何设置按钮的模态宽度，使其仅位于模态的边缘，可以说有5 px的边框边距？
模态引导程序
我还没有在CSS文件中添加任何样式，即使我尝试修改宽度，但我猜都不知道如何...
在对模式进行方法调用时，可以使用ngx-bootstrap附带的ModalOptions类设置配置对象。其中，'class'属性允许您传递将附加的类。
1 2 | const config: ModalOptions = { class: 'modal-sm' }; this.bsModalRef = this.modalService.show(YourComponent, config); |
希望这会有所帮助
类似于@jgrittens响应。
1 2 | this.modalRef = this.modalService.show(template); this.modalRef.setClass('modal-sm'); |
将
创建模态时，将css类传递给以下选项：
1 | this.modalService.show(template, {class: 'modal-lg'}); |
我建议在组件装饰器中添加" encapsulation：ViewEncapsulation.None"，然后使用类似以下内容的类覆盖该类：
1 2 3 4 | .modal-dialog{ max-width: 600px !important; width: 600px !important; } |
您可以简单地使用以下样式覆盖模式的原始尺寸
1 2 3 4 | ::ng-deep .modal-dialog{ max-width: 1200px !important; width: 1200px; } |
对我有用的是:: ng-deep，带有.modal-content，
但仅在放置！important属性
之后
1 2 3 | ::ng-deep .modal-content { max-width: 1080px!important; } |
这对我有用。在styles.scss ...
1 2 3 | .modal-lg { max-width: 559px !important; } |
只需将以下行添加到您的ts文件中：
config：ModalOptions = {class：'modal-lg'};
然后在BsModal sERVICE
的show方法中也传递配置
示例：
1 2 3 | config: ModalOptions = { class: 'modal-lg' }; openModal(template: TemplateRef) { this.modalRef = this.modalService.show(template, this.config); |
} ??
创建模态后可以使用
您只能使用CSS样式来更改容器的宽度。
更改.modal-dialog类的最大宽度属性，某些情况下更改.modal-sm类。