Search code examples
cssangular2-mdl

How to configure css associated to mdl-select on angular 2 quickstart solution

I am trying to use an mdl-select component in a form on angular 2 but the component is showing in drop drown state the whole time. I assume it is because I have not associated css with it but am unsure how to do this in angular 2 quickstart solution. Any guidance appreciated...

enter image description here

Thanks:)

Solution

  • I had the same problem. After trying different things, this is what worked for me: I added SASS styles .scss to ‘styles’ array of angular-cli.json. Instead of .css files to index.html. And, we have to add scss for popover component, too, as that is the one used internally. You don’t have to import the popover component, though, unless you are using it elsewhere.

    angular-cli.json

    "styles": [

        "styles.css",

    "../node_modules/@angular2-mdl-ext/select/select.scss",

    "../node_modules/@angular2-mdl-ext/popover/popover.scss"
  ],