Question

我想在modal内的内容展开或折叠时动态更改modal的高度。场景是我在模态中有一个collapsible咏叹调，当view answer按钮被点击时会扩展。现在，如果首次加载modal的内容高度需要滚动，那么即使在view answer按钮点击之后，一切正常。但是，如果初始高度不需要滚动那个时间，即使在扩展内容之后滚动也不会阻止用户执行进一步的操作。

屏幕：在展开screen before clicking view answer button之前展开screen after clicking view answer button. Here I need scroll otherwise user will get blocked后

代码：

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

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

当模态高度是动态滚动时，ngx-bootstrap不会到来

1 个答案: