[Bug] Validations on register page

tariqbk commented 4 years ago

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

`

                    </mat-form-field>

`

rarestoma commented 4 years ago

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

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>

`

rarestoma commented 4 years ago

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

creativetimofficial / ct-material-dashboard-pro-angular