Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Validations on register page #374

Open
tariqbk opened this issue Jun 13, 2020 · 4 comments
Open

[Bug] Validations on register page #374

tariqbk opened this issue Jun 13, 2020 · 4 comments

Comments

@tariqbk
Copy link

tariqbk commented Jun 13, 2020

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
Copy link
Author

tariqbk commented Jun 13, 2020

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

image

@rarestoma
Copy link
Contributor

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
Copy link
Author

tariqbk commented Jun 15, 2020

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>

image

@rarestoma
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants