search

marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

inconsistant behavior in angular 6 #227

Open khan990 opened 6 years ago

khan990 commented 6 years ago

Can anyone explain inconsistent behavior in Component-B when resizing the outer div?

https://stackblitz.com/edit/css-element-queries-b

dimi-nk commented 6 years ago

You seem to be getting ERROR Error: ResizeSensor is not a constructor

khan990 commented 6 years ago

yes, that is another issue which I wanted to create. But at this point focus on the css behaviour.

dimi-nk commented 6 years ago

Just meant that the error might be causing that behaviour. If you make the after view similar to the other component it works

khan990 commented 6 years ago

No, the error is not caused by that. You can comment out ResizeSensor part and see the result again... I checked it. I spent a complete day trying to fix it. And eventually we found a work around by putting element queries in one place accessable globally i.e. style.scss

marcj commented 6 years ago

So, what's the error here? What's expected and what is the actual outcome? A bit more information would be great otherwise nobody will be able to help.

khan990 commented 6 years ago

Not being good at explaining things is a problem I am facing since ages, and I guess it will stay till eternity 😉 .

What is expected? After clicking on component-B button, what should happen is that XS columns should appear as two columns as parent div is greater than 200px. SM, MD and LG should be in rows. as their queries have been set to [min-width~="400px"], [min-width~="600px"] and [min-width~="800px"] respectively. As you try to resize the parent div, you will see that only SM and MD column are responsive while XS and LG columns are not. Although they follow same rules as SM and MD with different values ofcourse.

Here is the corrected version: https://stackblitz.com/edit/css-element-queries-d

But it does not explain, why former (https://stackblitz.com/edit/css-element-queries-b) should not work.