Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular mat-form-field center alignment

Everywhere you can find how to center the text and even placeholder and labels and everything but I can't center the whole form-field and it looks ugly as hell.

<div class="mat-app-background basic-container">
  <div layout-gt-sm="column" style="min-width: 350px; max-width: 450px; margin:auto">
    <mat-card flex-gt-sm class="push">
      <div style="text-align:center;">
        <mat-card-title>Login</mat-card-title>
      </div>
      <div style="text-align:center;">
      <mat-card-content>
        <form [formGroup]="loginForm" class="form" (ngSubmit)="login()">
          <table cellspacing="0">
            <tr>
              <td>
                <mat-form-field>
                    <div style="text-align:center;">
                  <input matInput placeholder="{{ 'LOGIN.USERNAME' | translate }}" name="username"
                    formControlName="username" type="name" />
                  <mat-error *ngIf="formErrors.username" class="form__error">{{ formErrors.username }} </mat-error>
                </div>
                </mat-form-field>
              </td>
            </tr>

I hope this code needs. If not I will post the rest of the html. But it's just about centering the fields. Didn't used CSS here.

like image 577
CptDayDreamer Avatar asked Apr 29 '19 16:04

CptDayDreamer


People also ask

How do you center a field input mat?

You can put style="text-align:center;" inside input element.

What is mat form field infix?

<mat-form-field> is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.

What is matSuffix?

The matSuffix is a configuration directive for the material input field, that will ensure that the calendar icon is added at the end (to the right) of the input field. If instead you want to show the calendar icon to the left of the input field, you can do so by using matPrefix instead of matSuffix .

What is the use of mat form field?

The <mat-form-field> is a component that is used to wrap multiple MAT components and implement common text field styles of the form-field such as hint message, underlines, and floating label. These five MAT components are designed to work inside the form-field: <mat-chip-list>


1 Answers

I would recommend you to use flexbox.

I am also not sure why do you need to put it inside a , but I have removed it to simplify the demo.

<div class="parent">
  <mat-form-field>
    <div style="text-align:center;">
      <input matInput placeholder="{{ 'LOGIN.USERNAME' | translate }}" name="username" formControlName="username" type="name" />
      <mat-error *ngIf="formErrors.username" class="form__error">{{ formErrors.username }} </mat-error>
    </div>
  </mat-form-field>
</div>

And on your CSS,

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

The properties justify-content and align-items with the value of center will center the flex children along the line and in the cross-axis respectively, thus placing them on the centre of the page. The property flex-direction with the value of column aligns the children (form fields) from top to bottom.

like image 163
wentjun Avatar answered Sep 28 '22 00:09

wentjun