Why do the angular material definitions in my HEAD differ?

During the implementation of angular-material in my app, I noticed differences between the styling of the samples and the elements in my app. In this case, specifically the md-subheader element. On the demo site (https://material.angularjs.org/HEAD/demo/list) this has a light gray background, in my app the background is white. Note that the CSS classes applied to my element are exactly the same as the ones in the demo.

Now I've checked and the CSS declaration for this background color comes from one of the <style> elements loaded in the HEAD portion of the HTML (inline). I've compared the two declarations and indeed: they're different. But why? I checked the version of angular material, checked the theme loaded, all equal. The only difference there might be is that my code is executed in a Cordova / PhoneGap mobile app instead of a desktop browser, but that shouldn't really matter I'd say.

From a Codepen:

Same CSS style in my app:

Does anyone know where material loads these <style> declarations from and why they might be different for my app?

Answers


Check the version of Angular Material installed in bower.json. The problem is the following:

In the webpage, Angular Material points to the latest, 1.1.0 RC4 https://material.angularjs.org/latest/

But if you click on HEAD the version is 1.0.7. https://material.angularjs.org/HEAD/

So the problem is, your installed version is 1.0.7 and you are viewing the demos for 1.1.0-RC4


Need Your Help

Is there an alternative to require() in Node.JS? A "soft require" which tries to find a file but doesn't error if it isn't there

node.js config require

I'm loading a config.json file using require('./config.json') but I don't want to require a config file if they want to pass command line arguments instead, or just use the defaults. Is there any ...

Is it possible to write a regex to extract java package?

java regex package

Is it possible to write a regex, which extractst the package path in a .java file?