所有组件的角度全局CSS

Question

I have a single html file and a single css file, which i want to convert to angular 2 way => separate some objects in the document to different components... So i created an angular app and components, and i don't want to change anything in my global css file.

I'm trying to apply a global css in my "index.html" to all my child components but it seems that each component uses the css relative to itself.. What i mean is for example if in my "all.css" file i have these lines:

.col-lg-3 {
   width: 25%;
}

In my child component the 25% width will be relative to the component width and not to my document's < body > width... Which will 'cause my component to be 25% of the body, but the inner objects of my component will be 25% of the 25%...

What should i do?

Thanks

EDIT:

What i try to achieve is that each css element will be relative to the < body > tag of the document instead of the parent element... For example: I have 3 components:

App -> Parent -> Child

I want the Child's component element width percent to be relative to the App component instead of the parent component...

Answer 1

I don't completely understand what you are trying to do as there is no code provided. However there are many solutions based on what you are looking to achieve.

(a) You can either move the div outside of the current parent or define a specific width for the inner div.

(b) If you just need to always have the inner div's width based on the main content area, you can use the viewport width

.col-lg-3 {
   width: 25vw;
}

This will setup width to 25% of viewport width

(c) If you need to dynamically change width during runtime and there are specific elements that need to change, you can capture the viewport width after the Body loads and change the width of the inner div using

document.getElementById('elementsId').style.width = 0.25 * window.innerWidth + 'px' //you can use screen.width also

(d) Use less.js that allows you to dynamically change a CSS class during run time. See http://lesscss.org/ for more details

In your less CSS add this

@myinnerWidth:25%
.col-lg-3 {
   width: @myinnerWidth
}

and then in your controller change the myinnerWidth dynamically

less.modifyVars({
  '@myInnerWidth': 0.25 * screen.width + 'px'
});