При попытке добавить пользователей, как показано ниже, с помощью флажков элементы перекрываются с кнопками формы.Я попытался установить фиксированное положение для кнопок, но это, похоже, не работает.Я также попытался удалить фиксированный размер на модале, который тоже не работает.Может быть, это поведение вкладки углового бустрапа.
<app-modal-animation [modalID]="'UnitModal'" [modalClass]="'md-effect-8'" *ngIf="isFormReady">
<div style="max-height:650px; overflow-y:auto; overflow-x: hidden">
<div class="md-tabs md-card-tabs">
<form class="md-float-material form-material m-t-40 m-b-40 ng-invalid:not" [formGroup]="unitModalForm"
(ngSubmit)="saveUnit()">
<ngb-tabset #tabs (tabChange)="beforeChange($event)">
<ngb-tab id="main" title="Unit Info">
<ng-template ngbTabContent>
<div [@fadeInOutTranslate] class="m-t-15">
<!-- personal card start -->
<div class="card">
<div class="card-body">
<div class="edit-info">
<div class="row">
<div class="col-lg-12">
<div class="general-info form-material">
<div class="row">
<div class="col-lg-12 ">
<div class="form-group form-primary">
<label>Unit: </label>
<input type="text" class="form-control"
formControlName="name" required=""
ng-disabled="disable">
<div class="messages text-danger"
*ngIf="unitModalFormErrors.name">
{{unitModalFormErrors.name}}
</div>
<span class="form-bar"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 ">
<div class="form-group form-primary">
<label>Description: </label>
<input class="form-control" required=""
formControlName="description">
<!-- <div class="messages text-danger"
*ngIf="unitModalFormErrors.description">
{{unitModalFormErrors.description}}
</div> -->
<span class="form-bar"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
<ngb-tab id="PersonsAssignedTab" *ngIf="isUpdateOperation" title="Users">
<ng-template ngbTabContent>
<div [@fadeInOutTranslate] class="m-t-15">
<div class="row">
<div class="col-lg-12">
<ul *ngIf="!editPersonAssignment" class="basic-list list-icons">
<li [value]="assignedPersons" *ngFor="let assignedPersons of unitPersonList">
<i class="icofont icofont-user-alt-3 text-primary p-absolute text-center d-block f-20"></i>
<label>{{this.getPersonTextRow(assignedPersons)}}</label>
</li>
</ul>
</div>
</div>
<div *ngIf="editPersonAssignment" class="card">
<div class="row">
<div class="col-lg-12">
<div class="material-group">
<div class="form-group form-primary">
<ul class="basic-list list-icons">
<li formArrayName="personAssigned"
*ngFor="let person of personAssigned; let i = index">
<input type="checkbox" (change)="onCheckedChange($event,person)" [formControlName]="i">
{{this.getAssignedPersonInfoTextRow(personAssigned[i])}}
</li>
<span class="form-bar"></span>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
<div class="row" style="margin: auto">
<div class="col-md-6">
<button type="button"
class="btn btn-outline-danger btn-round btn-md btn-block text-center m-b-20 ripple light"
(click)="closeMyModal('UnitModal')">Cancel</button>
</div>
<div class="col-md-6">
<button [hidden]="loadingModal"
[disabled]="submitted && unitModalForm.touched && unitModalForm.invalid"
type="submit"
class="btn btn-outline-success btn-round btn-md btn-block text-center m-b-20 ripple light">{{saveBtn}}</button>
<div [hidden]="!loadingModal"
class="btn btn-outline-success btn-round btn-md btn-block text-center m-b-20 ripple light">
Waiting...
<i class="fa fa-spin fa-spinner" style="font-size:20px"></i></div>
</div>
</div>
</form>
</div>
</div>
</app-modal-animation>
