Covalent: Rendering issue on menu bar and other elements

[victorboissiere]

Bug Report

My team and I are having issue getting covalent to work especially with some components like the default toolbar with search. I have checked everything including the scss imports and component imports but nothing seems to work.

Screenshot

What is the expected behavior?

Versions

Angular : 2.4.0
Material : 2.0.0-beta.2
Covalent : 1.0.0-beta.2-1

Web Browser : Google Chrome 57 and Mozilla Firefox 52
OS: Ubuntu 16.04

Steps to reproduce

I have made a github project using angular-cli with a clean configuration and I just added the toolbar html code found on the covalent documentation as well as adding all needed imports. The html toolbar content is inside src/app/app.component.html.

Link : https://github.com/victorboissiere/covalent-issue

[asaph26]

@victorboissiere You need to include the @covalent styles in your angular-cli.json under styles

"../node_modules/@covalent/core/common/platform.css"

The reason everything breaks is because @covalent uses flexbox styles that are included in the platform.css

This is mentioned in the getting started guide in the bottom
https://github.com/Teradata/covalent/blob/develop/docs/GETTING_STARTED.md#using-platformscss

[victorboissiere]

Thank you so much. It fixed the problem. It is unfortunate still that it is not present in the getting started from the online documentation : https://teradata.github.io/covalent/#/docs or style guide.
Thanks

[emoralesb05]

Adding FAQS label

[ashishbaghudana]

I'm facing a somewhat similar issue where all the text in my toolbar is not vertical center aligned.

I've included platform.css in .angular-cli.json. What might be causing this issue?

[asaph26]

Are you running the app in IE11?