CODEWITHSUNDEEP
cssangular
ErnieKev
ErnieKev

Reputation: 3011

Putting CSS at different parts of app creates different effect

I have a really weird situation where my view is different depending on where I put the following CSS class. I only have one item that is connected to this class which is my md-progress-bar from Angular Materials 2. I want it to float underneath my tool bar which is fixed on the screen.

.floating-progress {
  position: fixed;
  top: 0px;
  z-index: 1005;
}

When I put this inside app.component.css, I get the following result where the bar sits on the top of the tool bar.

screen shot 1

However, when I change this css class to my global styles.css, I get a the actual result that I wanted screen shot 2

How come there is a different depending on where I put it?

Upvotes: 1

Views: 39

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657128

Angular does style encapsulation for styles added components.

The components get attributes like _ng_context-xxx with unique xxx added. The CSS selectors will be rewritten to match only these attributes, before the CSS is added to the DOM.

See also https://angular.io/docs/ts/latest/guide/component-styles.html

Upvotes: 1

Related Questions