Input with Icon error message invalid alignment


Topic: Input with Icon error message invalid alignment

itdev pro asked 6 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>
</mdb-error>

Damian Gemza staff answered 6 years ago

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.


itdev pro answered 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.


Arkadiusz Idzikowski staff answered 6 years ago

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 commented 5 years ago

I am facing the same problem for an input with an icon, here's my code snippet:

Subject

I tried with the following in my scss but without success: .md-form { mdb-error { left: 2.5rem; } }

Please help


Arkadiusz Idzikowski staff commented 5 years ago

You didn't include the code snippet, please edit your comment. Which version of MDB Angular do you use?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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