ngx-bootstrap when modal height is dynamic scroll is not coming

Question

I want to change the height of modal dynamically whenever the content inside the modal is expanding or collapsing. The scenario is I have a collapsible aria inside the modal which expands when view answer button gets clicked. Now while first time loading if content height of modal needs scroll then even after view answer button click everything works fine. But if initial height does not need a scroll that time even after expanding the content scroll is not coming which blocks user to perform further actions.

Screens: Before expanding screen before clicking view answer button After expanding screen after clicking view answer button. Here I need scroll otherwise user will get blocked

Code:

<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

How about do it like this?

Add a class on modal-body and set height and overflow.

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