CODEWITHSUNDEEP
angularangular-material
Ashik Ahmed
Ashik Ahmed

Reputation: 142

Angular 2 Material 'Input' placeholder is not floating on focus

The placeholder in the textbox isn't floating on focus as shown in the screenshot below. Placeholder does not float on focus

Click to view full screenshot

Here is my code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatCheckboxModule, MatInputModule, MatListModule, MatCardModule, MatButtonModule, MdDatepickerModule, MdNativeDateModule, MatIconModule, MatTabsModule } from '@angular/material';
import { FormsModule,  ReactiveFormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { AppRoutes } from './app.routes';

@NgModule({
  declarations: [
      AppComponent
  ],
  imports: [
      BrowserModule,
      RouterModule.forRoot(AppRoutes),
      BrowserAnimationsModule,
      MatCheckboxModule,
      MatInputModule,
      MatCardModule,
      MatButtonModule,
      MdDatepickerModule,
      MdNativeDateModule,
      MatIconModule,
      MatTabsModule,
      MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is how I use it:

login.component.html:

<md-card>
    <md-card-header>
        <h2>Login</h2>
    </md-card-header>

    <md-card-content>
        <div class="divInput">
            <md-input-container>
                <input mdInput type="text" placeholder="Login ID">      
            </md-input-container>

        </div>
        <div class="divInput">
            <md-form-field>
                <input mdInput type="password" placeholder="Password">
            </md-form-field>
        </div>
    </md-card-content>
    <md-card-actions>
        <button md-button>LIKE</button>
    </md-card-actions>
</md-card>

Am I missing anything required? Could it be because I'm missing some required modules?

Upvotes: 1

Views: 1076

Answers (1)

Jinny Jayson
Jinny Jayson

Reputation: 36

I was facing the same issue, Add the below given import statement to style.css. This have fixed my issue.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

I guess this should solve your problem.

Upvotes: 1

Related Questions