如何增加ngbmodal的宽度

时间:2019-06-11 08:27:48

标签: angular bootstrap-4

我需要知道如何增加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);
        });
    }

}

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

1 个答案:

答案 0 :(得分:0)

我不确定您希望框的大小,但是您实际上可以使用size属性,可以通过NgbModal服务更改第二个参数{{1 }}。您可以参考documentation本身的更多详细信息。

NgbModalOptions

否则,如果您有任何自定义样式要求,则可以使用this.modalService.open(content, { size: 'lg', // other properties }); 属性,并将其传递给windowClass

NgbModalOptions