NGX-Bootstrap当模态高度为动态滚动时不会出现

我想在modal内的内容扩展或崩溃时动态更改modal的高度。场景是我在模态内有一个collapsible ARIA，当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-b-q" [innerHTML]="'Q. ' + questions[nextQuestionIndex].question"></p>
        <p class="text-left padding-b-10 border-b-q" (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>

这样怎么样？

在模态上添加一个类，并设置高度和溢出。

<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;
}

对聚会的看法太晚了，希望我的回答以后对某人有所帮助。看到您的屏幕截图后，我建议使用"模态滚动内容"。您的UI方法。因此，只有"内容"将扩展并将模态高度推至屏幕高度的最大值(不超过屏幕高度(。因此，模态标题和页脚将始终保持可见，并且内容区域可滚动。

请检查我制作的以下codepen的演示：https：//codesandbox.io/s/ngx-booostrap-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

希望这个答案对某人有所帮助。谢谢：(

相关内容

最新更新

热门标签：