Topic: Input with Icon error message invalid alignment
itdev pro asked 4 years ago
When using mdb-error on an input that has a prefix icon, the error message appears under the icon instead of the input field bottom bar. You can test the attached code. If you do not use a prefix icon the error message is aligned perfectly.
<i class="fa fa-envelope fa-fw prefix"></i>
<input mdbInput mdbValidate type="email" id="email" class="form-control" [(ngModel)]="email" name="email" #emailModel="ngModel" required>
<label class="active" for="email">Email</label>
<mdb-error *ngIf="emailModel.invalid && (emailModel.dirty || emailModel.touched)">
<span *ngIf="emailModel.getError('required')">Email is required</span>
Thanks for your report! We'll fix this with the next version.
As for now, please use the workaround - add the below code in the styles.scss file:
As a temporary solution you can add your custom class to the div with 'md-form' and use it to add 'left' style only to the inputs with icons.
That does not work properly. Your recommendation works if and only if all input fields have an icon. With the CSS you recommended, now input fields without icons that have error messages show up wrong.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: Yes
- Provided link: No