I have this angular material code:
<mat-form-field>
<div class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">...</div>
<div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align">
<div class="mat-mdc-form-field-error-wrapper">
<mat-error class="mat-mdc-form-field-error mat-mdc-form-field-bottom-align">
Your username must be at least 8 characters long and should not contain spaces and the following characters < > ;
</mat-error>
</div>
</div>
</mat-form-field>
and what I would like to do is that when error message is displayed adapt the height of the “mat-mdc-form-field-subscript-wrapper” div to the height of the error message. Any idea?
This is what I have
This is what I want
1
For dynamic adjustment, you need to make the error message, from absolute to relative positioning and ensure the parent container is display: flex. Since it’s absolute positioned the parent cannot take the dimensions of the child, hence this issue.
SCSS:
.example-container {
.mat-mdc-form-field-subscript-wrapper {
display: flex;
}
.mat-mdc-form-field-hint-wrapper,
.mat-mdc-form-field-error-wrapper {
position: relative;
}
}
Stackblitz Demo
This is the simplest way, you have to add bottom margin, to adjust for the long text.
SCSS:
.example-container {
.first {
margin-bottom: 50px;
}
}
HTML:
<div class="example-container">
<mat-form-field class="first">
<mat-label>Enter your email</mat-label>
<input
...
Stackblitz Demo