Topic: Input with Icon error message invalid alignment
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>
</mdb-error>
Dear @itdev
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:
.md-form {
mdb-error {
left: 2.5rem;
}
}
Best Regards,
Damian
itdev pro commented 6 years ago
Damian,
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.
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.
subrahmanyav free commented 4 years ago
I am facing the same problem for an input with an icon, here's my code snippet:
SubjectI tried with the following in my scss but without success: .md-form { mdb-error { left: 2.5rem; } }
Please help
Arkadiusz Idzikowski staff commented 4 years ago
You didn't include the code snippet, please edit your comment. Which version of MDB Angular do you use?
Damian,
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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