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 ing 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>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 ing 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>2 Answers
Reset to default 4How 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;
}
Looks so late to the party, just hope my answer helps someone later. After seeing your screenshot, I suggest having a "Modal scrollable content" approach for your UI. So, only the "content" will expand and push the modal height to the maximum of the screen height ( not over screen height ). So, the modal header and footer will always keep visible, and the content area is scrollable.
Please check the demo on the following Codepen I have made: https://codesandbox.io/s/ngx-boostrap-scrollable-modal-69jox.
It is using:
- [email protected] ( as seen in
index.html) - [email protected]
The trick is to have a special class added to the modal when doing modalService.show(). You can see it at /src/app/app.ponent.ts
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, {
class: "modal-dialog-centered modal-dialog-scrollable"
});
}
The class name I have mentioned earlier was modal-dialog-scrollable. About modal-dialog-centered is just my personal preference to have the dialog always get centered.
More about "Modal option" used above can be found at the documentation here: https://valor-software./ngx-bootstrap/old/5.6.0/#/modals#modal-options
Hope this answer helps someone. Thanks :)