[Bug] Validations on register page

[tariqbk]

Version

2.4.1

Reproduction link

https://demos.creative-tim.com/material-dashboard-pro-angular2/#/pages/register

Operating System

Windows 10

Device

Dell

Browser & Version

Chrome Latest

Steps to reproduce

This is on the register page when trying to implement forms validations.

When wrapping an input element within a form with a tag, the icon and the textbox do not stay in one line. Is there any class we can use to correct this issue?

What is expected?

Icon and textbox are both displayed on the same line.

What is actually happening?

Icon and textbox are not on the same line.

---

Solution

Additional comments

[tariqbk]

<mat-form-field> <input type="text" class="form-control" formControlName="fullName" placeholder="Full Name..."> </mat-form-field>

[rarestoma]

Hi @tariqbk,

Thank you for working with our products.

Can you please try with this code:

<mat-form-field>
  <div class="input-group">
     <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="material-icons">face</i>
         </span>
      </div>
    <input type="text" class="form-control" formControlName="fullName" placeholder="Full Name...">
   </div>
 </mat-form-field>

Please let me know if it works.

Thank you,
Rares

[tariqbk]

That fixes the icon and the line, but now the fields are too spaced out. There is a lot of space between the fields.

Here's my updated code:
<div class="form-group has-default"> <mat-form-field> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">face</i> </span> </div> <input type="text" class="form-control" formControlName="fullName" placeholder="Full Name..."> </div> </mat-form-field> </div>

[rarestoma]

Hi @tariqbk,

Can you please try adding an mt-0 class on form-group has-default? I think this is fixing this problem.

Thank you,
Rares