CODEWITHSUNDEEP
csscordovaangular-material
Jasper
Jasper

Reputation: 1837

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:

Codepen

Same CSS style in my app:

In my app

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

Upvotes: 0

Views: 31

Answers (1)

Danilo Velasquez
Danilo Velasquez

Reputation: 501

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

Upvotes: 0

Related Questions