Angular4 Material Input not displaying properly

Question

I'm trying to put Material in an angular4 project where i copy/pasted the exampel with a table. The programmatic part is working as expected when i type a customer name (it filters as it should) and the table below shows perfectly good. The problem is that the matInput inside the mat-form-field is not displayed correctly. When you type something the typed text overlays the placeholder, instead of the placeholder going floating up. Here is my code and screenshot of the problem.

Console shows no errors or anything, everything seems to be working fine, it's a css issue with the input field what i'm facing.

Here is my component code .html

        <app-topmenu></app-topmenu>
<br><br>
<div class="container">
    <div>
        <div class="col-xs-12">
            <div class="example-container mat-elevation-z8">
              <div class="example-header">
                <mat-form-field>
                  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Customer Name">
                </mat-form-field>
              </div>


            </div>

        </div>
    </div>
</div>

Here is my component .ts code

import { Component, OnInit } from '@angular/core';
import { MainconfService } from '../services/mainconf.service';
import {MatTableDataSource} from '@angular/material';
import {MatInputModule} from '@angular/material/input';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

    displayedColumns = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);

     applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filter = filterValue;
     }

  constructor(public mainconf: MainconfService ) {

   }




  ngOnInit() {
       this.mainconf.authenticate();
  }






}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

Here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LogoffComponent } from './logoff/logoff.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
// import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ApiService } from './api.service';
import { MainconfService } from './services/mainconf.service';
import { TopmenuComponent } from './topmenu/topmenu.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule, MatCardModule, MatTableModule, MatFormFieldModule, MatInputModule  } from '@angular/material';

const appRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'logoff', component: LogoffComponent },
  { path: '**', component: LoginComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    LogoffComponent,
    TopmenuComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only
  ),

  // NgbModule.forRoot(),
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule, MatButtonModule, MatCheckboxModule, MatCardModule, MatTableModule, MatFormFieldModule , MatInputModule

  ],
  providers: [ApiService, MainconfService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I was having a similar problem and wracking my brain but then I noticed an unrelated error (null reference in a different HTML block in my template) that was somehow causing the input to not render correctly. If this is still happening to you in 2023 then maybe it's user error :-D

Answer 2

I had same issue with purple-green.css theme selected. Change the theme to indigo ping it should start working.

Answer 3

I found the problem, I'll state in case someone is in similar situation.

I need to place

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

inside styles.css (which I havent before).