This the textarea and the two buttons below:
enter image description here
When I expand the textarea, it overlaps the two buttons below:
enter image description here
Here is the HTML code:
` <div class=”file-name-wrapper” [ngClass]=”this.fileName !== undefined && this.fileName !== ‘Send Notification’ ? ‘comments-section-height’ : ‘comments-section'”>
Comments
<textarea rows=”3″ matInput [(ngModel)]=”comments” #comment name=”comments” maxlength=”400″
title=”Comments”>
Max. 400 characters
{{comment.value.length}} / 400
<div class="bottom-wrapper buttons-wrapper">
<div>
<button
mat-stroked-button
*ngIf="!(this.fileName !== undefined && this.fileName !== 'Send Notification')"
id="upload-communication-cancel"
title="Cancel"
(click)="onSkip()"><span
class="skip-button-label">CANCEL</span></button>
<button
mat-stroked-button
*ngIf="this.fileName !== undefined && this.fileName !== 'Send Notification'"
id="upload-communication-skip"
title="Skip"
(click)="onSkip()"><span
class="skip-button-label">SKIP</span></button>
</div>
<div class="buttons-wrapper-deep">
<button mat-flat-button color="primary" [autofocus]="false"
(click)="onSendNotification()" [disabled]="this.selectedReviewers.length < 1">SEND NOTIFICATION</button>
</div>
</div>`
Here is the css code:
.bottom-wrapper { margin-top: 55px !important; }
How can I get the margin-top to expand as the textarea expands? Or any other way to keep the textarea from overlapping the two buttons as it expands?
I have tried making the margin-top a percentage value such as
.bottom-wrapper { margin-top: 15% !important; }
but even that does not work