Question

如何将宽度设置为我的ngx bootstrap模式，我已尝试但是它已经修复了？

这里是html

import seaborn.distributions as sd
sd._has_statsmodels = False
# plot kdeplot with scipy.stats.kde.gaussian_kde
sns.kdeplot(x,y)

如何设置按钮的模式宽度，使其仅位于模态的边缘，让我们说5 px的边框边距？

modal bootstrap

我还没有在我的css文件中添加任何样式，即使我尝试修改宽度但我也不知道如何...

Answer 1

在对模式进行方法调用时，可以使用ngx-bootstrap附带的ModalOptions类设置配置对象。在其中，“ class”属性允许您传递将附加的类。

const config: ModalOptions = { class: 'modal-sm' };
this.bsModalRef = this.modalService.show(YourComponent, config);

希望这会有所帮助

Answer 2

您可以简单地使用以下样式覆盖模式的原始尺寸

::ng-deep .modal-dialog{
    max-width: 1200px !important;
    width: 1200px;
  }

Answer 3

类似于@jgritten的回复。

this.modalRef = this.modalService.show(template);
this.modalRef.setClass('modal-sm');

它将max-width设置为300px

Answer 4

您只能使用CSS样式来更改容器的宽度。在某些情况下，将 .em-dialog 类的最大宽度属性更改为 .modal-sm 类。

Answer 5

我建议在组件装饰器中添加“ encapsulation：ViewEncapsulation.None”，然后使用类似以下内容的类覆盖该类：

 .modal-dialog{
    max-width: 600px !important;
    width: 600px !important;
  }

Answer 6

创建模态后，可以使用doucment.getelementsbyClassName。然后，您可以根据需要更改元素minWidth。

Answer 7

创建模态时，将css类传递给以下选项：

this.modalService.show（template，{class：'modal-lg'}）;

Answer 8

只需在ts文件中添加以下行： config：ModalOptions = {class：'modal-lg'}; 然后在BsModal sERVICE的show方法中也传递配置

示例：

config: ModalOptions = { class: 'modal-lg' };
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, this.config);

}

Answer 9

这对我有用。在styles.scss ...

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

Answer 10

对我有用的是 ::ng-deep 和 .modal-content，但只有在我放置了 !important 属性之后

::ng-deep .modal-content {
    max-width: 1080px!important;
}

Answer 11

使用集合类

let modal = this.bsModalService.show(ConfirmModalComponent, { 
         initialState: { message: 'คุณแน่ใจหรือไม่ว่าจะลบข้อมูล Voucher นี้?' },});

modal.setClass('modal-custom-style');

和自定义 CSS

::ng-deep .modal-custom-style { max-width: 1200px!important; width: 1200px; }

如何改变ngx bootstrap模态宽度？

11 个答案: