I need some help with aligning my small form properly. It seems to be misaligned and messy, especially when I click on the plus button. The issues I'm facing are:
- The blue content on the right side expands vertically causing extra space. I want it to stay at a fixed height.
- The minus button needs to be positioned correctly next to its corresponding line.
- The plus button should also be aligned properly.
Any assistance would be greatly appreciated.
Here is the code snippet:
<div class="row">
<div class="col-md-8">
<mat-dialog-content class="mat-typography">
... (code continues)
</mat-dialog-content>
</div>
<div class="col-md-4 callout callout-info no-margin">
<li>Format: post:/api/v1/addAccount/id
<br> Usage :
<ul>
<li>post:/api/v1/addAccount/id</li>
<li>get:/api/v1/getAccount/id</li>
<li>put:/api/v1/updateAccount/id</li>
<li>delete:/api/v1/deleteAccount/id</li>
</ul>
</li>
</div>
</div>
<mat-dialog-actions class="pull-right" align='end'>
<button mat-raised-button class="nav-btn text-primary" type="submit" [disabled]="checkFormValidity()"
(click)="saveEndPoint()">Save</button>
<button mat-raised-button class="nav-btn text-primary" (click)="dialogRef.close()">Cancel</button>
</mat-dialog-actions>
This is how the current design looks like: