Spacing between required message and input field

[mldardy]

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>

In the css

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

[Ray.H]

@mldardy

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.

Hi,
I’m guessing that the required message is removed from the flow and is absolute positioned. That is why it is laying on top of the address field and not pushing it down. The padding you added is probably there and you would notice it if there was a border or background color.

Actually I think that is the accepted way of doing it since the message is just there momentarily until the field is correct. If it was position static the neighboring fields would be jumping up and down with the error messages.

[windbeneathmywings]

We have dealt with the same problem by using tooltips instead of the standard mat-error element in certain places.

[mldardy]

@windbeneathmywings

We have dealt with the same problem by using tooltips instead of the standard mat-error element in certain places.

I had tooltip but it had to be replaced with this

[windbeneathmywings]

I was referring to a tooltip that replaces the error message and stays in place. Not a traditional tooltip that is revealed when you hover over the element. The one in the picture above only goes away once the user places focus back on the element. Otherwise that error flag will be displayed regardless of whether the user hovers over it or not.