Я работаю над приложением, использующим интерфейс Angular-7. В приведенной ниже форме элементы поля формы усекаются, и отображается не все:
addModal
<div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Role</h5>
<button type="button" class="close" (click)='closeAddModal()'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" [hidden]="!error.name">
{{ error.name }}
</div>
<form #editRoleForm=ngForm>
<div class="form-group">
<label for="name">Name</label>
<input type="name" name="name" id="inputName" class="form-control" placeholder="Name" [(ngModel)]="form.name" required>
</div>
<div class="form-group">
<label for="name">Permissions</label>
<div *ngFor="let permission of permissions">
<input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkboxAdd($event)"> {{ permission.name }}
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editRoleForm.valid">Save changes</button>
<button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
</div>
</div>
</div>
</div>
editModal
<div id="editModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Role</h5>
<button type="button" class="close" (click)='closeEditModal()'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" [hidden]="!error.name">
{{ error.name }}
</div>
<form #newRoleForm=ngForm>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required [(ngModel)]="data.name"/>
</div>
<div class="form-group">
<label for="name">Permissions</label>
<div *ngFor="let permission of permissions">
<input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkbox($event)" *ngIf="!data.permission.includes(permission.name)">
<input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkbox($event)" *ngIf="data.permission.includes(permission.name)" checked> {{ permission.name }}
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" [disabled]="!newRoleForm.valid" (click)='editsubmit()'>Save changes</button>
<button type="button" class="btn btn-secondary" (click)='closeEditModal()'>Close</button>
</div>
</div>
</div>
</div>
Как оформить форму так, чтобы отображались все элементы формы (я даже не вижу кнопку отправки)? Это может быть даже в трех столбцах.