javascript - ngx-bootstrap when modal height is dynamic scroll is not coming - Stack Overflow

admin管理员组

文章数量:1406308

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>

• javascript
• html
• css
• angular5
• ngx-bootstrap

Share Improve this question Follow asked Feb 20, 2018 at 9:08 SHEKHAR SUMANSHEKHAR SUMAN 5111 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

本文标签： javascriptngxbootstrap when modal height is dynamic scroll is not comingStack Overflow