Modal containing long content gets out of the page

[Phoenixkaze]

When I open a modal which contains long content, it's top part gets out of the page view. It looks like this The modal's template is like this, it just contains a form.(It contains some Chinese characters but nothing important)

<modal #dishDetailModal>
  <ng-template #modalHeader><h5>菜品详情</h5></ng-template>
  <ng-template #modalBody>
    <form name="dishDetailForm">
      <div class="form-group">
        <label for="nameInput">菜品图片</label>
        <app-image-input (onImageInput)="onImageInput($event)"></app-image-input>
      </div>
      <div class="form-group">
        <label for="nameInput">菜品名称</label>
        <input class="form-control" type="text" required [(ngModel)]="selectedDish.name" name="dishNameInput" (change)="onFormInput()" />
      </div>
      <div class="form-group">
        <label for="nameInput">菜品价格</label>
        <input id="priceInput" class="form-control" required type="number" [(ngModel)]="selectedDish.price" name="priceInput" (change)="onFormInput()" />
      </div>
      <div class="form-group">
        <label for="typeSelect">菜品分类</label>
        <select id="typeSelect" class="form-control" (change)="onFormInput()">
          <option *ngFor="let dishType of dishTypes" value="{{ dishType.id }}">{{ dishType.typeName }}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="nameInput">菜品简介</label>
        <textarea id="introInput" class="form-control" required type="text" [(ngModel)]="selectedDish.intro" name="introInput" (change)="onFormInput()"></textarea>
      </div>
      <button type="button" class="btn btn-primary" *ngIf="detailModified" (click)="onSaveButtonClick()">保存更改</button>
    </form>
  </ng-template>
</modal>

Is there anything wrong? How can I make it stay inside the page view? Can it behave like Bootstrap's modal which can let long content scroll?

[zurfyx]

It looks like something that should be tackled through CSS.

The following might work (not tested it, it might need small adjustments):

.modal-content {
	position: absolute;
	top: 0;
	height: 100%; // or bottom: 0
	overflow: auto;
}

If you could upload a live demo somewhere I could try fiddling with it as well and give you a more accurate response.