當模態高度為動態滾動時的 ngx-bootstrap 不會出現

Question

每當modal內的內容展開或折疊時，我想動態更改modal的高度。 場景是我在模態中有一個collapsible詠嘆調，當點擊view answer按鈕時它會展開。 現在，當第一次加載時，如果modal內容高度需要滾動，那么即使在view answer按鈕之后點擊一切正常。 但是，如果初始高度不需要滾動，即使在展開內容滾動之后，該時間也不會滾動，這會阻止用戶執行進一步的操作。

屏幕：點擊查看答案按鈕前展開屏幕前 點擊查看答案按鈕后展開屏幕后。 在這里我需要滾動，否則用戶將被阻止

代碼：

 <ng-template #template> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">New question</h5> </div> <div class="modal-body"> <p class="text-left padding-b-10 border-bq" [innerHTML]="'Q. ' + questions[nextQuestionIndex].question"></p> <p class="text-left padding-b-10 border-bq" (click)="handleOptionClick(i)" *ngFor="let option of questions[nextQuestionIndex].options; let i = index"> {{i + '. '}}<span [innerHTML]="option" [ngClass]="{'text-success': (questions[nextQuestionIndex].answer === i) && optionValidationArr[i],'text-danger': (questions[nextQuestionIndex].answer !== i) && optionValidationArr[i]}"></span><span class="float-right" [ngClass]="{'text-success': (questions[nextQuestionIndex].answer === i) && optionValidationArr[i]}" *ngIf="(questions[nextQuestionIndex].answer === i) && optionValidationArr[i]">You are right</span><span class="float-right" [ngClass]="{'text-danger': (questions[nextQuestionIndex].answer !== i) && optionValidationArr[i]}" *ngIf="(questions[nextQuestionIndex].answer !== i) && optionValidationArr[i]">Please try again</span> </p> <div class="container"> <p> <a class="btn btn-outline-danger" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">View answer</a> </p> <p class="text-danger">This will reduce your score please try your best before viewing the answer</p> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> Correct answer: <span class="text-success">{{questions[nextQuestionIndex].answer}}</span><br> Explaination: <span></span> </div> </div> </div> <hr /> <div class="progress"> <div class="progress-bar bg-success progress-bar-animated progress-bar-striped" role="progressbar" [style.width.%]="progress.correctPer" [attr.aria-valuenow]="progress.correctPer" aria-valuemin="0" aria-valuemax="100">{{(progress.correctPer ? (progress.correctPer + '%'):'')}}</div> <div class="progress-bar bg-danger progress-bar-animated progress-bar-striped" role="progressbar" [style.width.%]="progress.wrongPer" [attr.aria-valuenow]="progress.wrongPer" aria-valuemin="0" aria-valuemax="100">{{(progress.wrongPer ? (progress.wrongPer+'%'):'')}}</div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-danger" (click)="closeModal()">End practice</button> <button type="button" class="btn btn-outline-primary" (click)="getNextQuestion(template, resultTemplate)">{{(((questionArrLen-1) !== nextQuestionIndex) ? "Next question" : "View result")}}</button> </div> </ng-template>

Answer 1

這樣怎么樣？

在模態主體上添加一個類，並設置高度和溢出。

<div class="modal-body question-modal-body">
</div>

.question-modal-body {
    max-height: 150px; // set the height which the answer is not shown
    overflow: auto;
}

Answer 2

聚會看起來太晚了，希望我的回答對以后的人有所幫助。 看到您的屏幕截圖后，我建議您的 UI 使用“模態可滾動內容”方法。 因此，只有“內容”會擴展並將模態高度推到屏幕高度的最大值（不超過屏幕高度）。 因此，模態頁眉和頁腳將始終保持可見，並且內容區域是可滾動的。

請查看我制作的以下 Codepen 上的演示： https ://codesandbox.io/s/ngx-boostrap-scrollable-modal-69jox。

它正在使用：

• bootstrap@4.6.1（如index.html ）
• ngx-bootstrap@7.1.2

訣竅是在執行modalService.show()時將一個特殊的類添加到模態中。 你可以在/src/app/app.component.ts看到它

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, {
      class: "modal-dialog-centered modal-dialog-scrollable"
    });
  }

我之前提到的類名是modal-dialog-scrollable 。 關於modal-dialog-centered只是我個人偏好讓對話框始終居中。

有關上面使用的“模態選項”的更多信息，請參見此處的文檔： https : //valor-software.com/ngx-bootstrap/old/5.6.0/#/modals#modal-options

希望這個答案對某人有所幫助。 謝謝 ：）