mdl-select broken layout

[andream16]

I'm reporting this issue since I'm using mdl-select and I can't understand why I get this layout:

Closed mdl-select:

Notice the misplaced dropdown image and the visible white line under it.

Opened mdl-select:

No onhover effect and still misplaced icon.

HTML:

<mdl-select placeholder="{{coutryLabel}}" floating-label="floating-label" [(ngModel)]="otherCountryCode">
    <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
 </mdl-select>

TS:

public coutryLabel = 'Italy';
public countries = [
    { name : 'France', code : 0 },
    { name : 'Germany', code : 1 }
];

Imported import { MdlSelectModule } from '@angular-mdl/select'; inside module where this component has been declared.

package.json:

"dependencies": {
    "@angular-mdl/core": "4.0.8",
    "@angular-mdl/popover": "^0.8.0",
    "@angular-mdl/select": "^0.11.1",
    "@angular/core": "4.3.6",
    . . . 
},
"devDependencies": {
    "@angular/cli": "1.1.0",
    "@angular/compiler-cli": "4.3.6",
    . . . 
}

[stephen-wigginton]

did you import the styles into one of your css/sass files? I dumped mine at the top of my app.component.scss, when i had this issue, and all was good afterwards.
you would just add the following, @andream16
@import '~@angular-mdl/select/select';