css-element-queries
css-element-queries copied to clipboard
marcj
inconsistant behavior in angular 6
Can anyone explain inconsistent behavior in Component-B when resizing the outer div?
https://stackblitz.com/edit/css-element-queries-b
yes, that is another issue which I wanted to create. But at this point focus on the css behaviour.
Just meant that the error might be causing that behaviour. If you make the after view similar to the other component it works
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
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.
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.