Question

我在angular 5中创建了一个有效的ngx-bootstrap模态。我想允许用户在显示模态后调整其宽度。是否必须包含任何CSS属性？？

config = {
    backdrop: true,
    ignoreBackdropClick: true
  };
  modalRef: BsModalRef;
  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
    
  }

<ng-template #template style="width:35%;margin-left:105px;margin-top:-4px;background-color: #ffffdd">
    <div style="padding-right:-18px">
        <button type="button" style="width:25px" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span style="font-size:2.5rem;margin-left:-1%" aria-hidden="true">&times;</span>
        </button>
    </div>
    <br>
    <div style="text-align: left;padding-left: 5px;background-color: #ffffdd">
       <pre> {{data}}</pre>
    </div>
</ng-template>

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

Wanted to allow user to drag and increase the width of ngx modal

Answer 1

Bootstrap Modal的大小取决于两个类别：'modal-lg'用于大型模式，'modal-sm'用于小型模式。

您可以使用[ngClass]这样切换这些类：

<div class="modal-dialog" [ngClass]="bigSize ? 'modal-lg' : 'modal-sm'">

并在用户事件上切换bigSize布尔属性，单击例如按钮：

<button (click)="bigSize = !bigSize">Toggle Size</button>

这是您推荐的Working Sample StackBlitz。

Answer 2

在CSS文件中需要添加以下行

::ng-deep .modal-content{
  width: 800px;
}

如何使ngx-bootstrap模态水平调整大小？

2 个答案: