Spacing between required message and input field

HTML-CSS
1

I’m trying to figure out the best way to create some spacing between the required message and the address input. In the image, you can see that the required message runs right up against the top of the address input. I tried to use padding in the css but that didn’t seem to work.

Here is the class I’m using in the html:

<mat-error class="form-field-extra-space" *ngIf="addRemoveForm.controls['dateOfBirth'].invalid">{{ addRemoveForm.controls["dateOfBirth"].errors?.errMsg }}</mat-error>

css

.form-field-extra-space {
  padding: 20px;
}

dob
dob990×443 21 KB

2

The message should be in an element that is display: block . You could apply margin-bottom to the message to push down the next row. if not apply it to the previous inputs or row container

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.