时间戳

首页 > 解决方案 > 如何增加ngbmodal的宽度

angular - 如何增加ngbmodal的宽度

问题描述

我需要知道如何增加 ngbModal 框的大小？由于盒子的尺寸很小，一些字体显示在盒子外面。

<ng-template #deletecontent2 let-c="close" let-d="dismiss" >
  <div class="modal-header  text-center" >
    <h2 class="modal-title  text-center" style="font-weight: 500">Policy Details</h2>
       <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
         <span aria-hidden="true">&times;</span>
       </button>
   </div>

    <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6" align="center">

       <div class="text-left"><h5 style="font-weight: 500">Policy Details</h5></div>
         <div class="text-center" *ngIf="selectedDeal">
           <p>Plan : {{selectedDeal.plan}}</p>
           <p>Room Limit : {{selectedDeal.room_limit || 'N/A'}}</p>
           <p>Issuance Date : {{selectedDeal.issuance_date || 'N/A'}}</p>
         </div>
       </div>


  <div class="row" >
     <div  align="center" >
      <div class=" text-center"><h5 style="font-weight: 500">Terms & Condition</h5></div>       
         <div *ngIf="displayData && displayData.length > 0" style="text-align: center">
            <tr *ngFor="let policy of displayData" class="block_container1"><div class="bloc1">{{policy.name}} :</div><div class="bloc2">&nbsp; {{policy.value}}</div></tr>
         </div>

     </div>
  </div>


</ng-template>

.ts

openDeal2(deletecontent2,se){
    this.selectedDeal = se;
    this.dealModal= this.modalService.open(deletecontent2, se);
    this.dealModal.result.then(r=>{
      }, err=> console.log(err))

    console.log(this.selectedDeal.policywording);
    this.wording = this.selectedDeal.policywording;


    this.displayData = [];

    if (this.wording) {
      const policies = this.wording.split('|').filter(w => w !== '');
      this.displayData = [];
      policies.forEach((policy) => {
      const splited = policy.split('=');
      const displayPolicy = {name: splited[0], value: splited[1]};
      this.displayData.push(displayPolicy);
        });
    }

}

只需要增加方框一点点，只需要在方框中显示字体即可。谢谢

标签： angularbootstrap-4

解决方案

我不确定您希望盒子有多大或多小，但您实际上可以使用该size属性，该属性可以通过 NgbModal 服务通过提供第二个参数来更改NgbModalOptions。您可以参考文档本身的更多详细信息。

this.modalService.open(content, { 
  size: 'lg',
  // other properties 
});

否则，如果您有任何自定义样式要求，您可以使用该windowClass属性，并将其传递给NgbModalOptions.

this.modalService.open(content, { 
  windowClass: 'your-class'
  // other properties 
});

推荐阅读