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

override position:relative inline style for resize sensor? #181

Closed cableray closed 6 years ago

cableray commented 6 years ago

So I have an element that needs to be the full height of it's fixed height ancestor, and this works fine, unless one of it's intermediate ancestors is position: relative, and this looks like this is exactly what resize sensor does. Is there a way to work around this, or disable setting position:relative on the element? (The sensor works fine if I disable the style in the inspector, but I'm only caring about horizontal resize in my case).

marcj commented 6 years ago

The sensor only works when the element that should be monitored is offsetParent of its children (our sensors). That means, our sensor monitors exactly that element that is offsetParent of our (two) element sensors. If you force the position of your element to be an other value than relative/absolute/fixed, then offsetParent is whatever parent element having position other than static.

The sensor works fine if I disable the style in the inspector, but I'm only caring about horizontal resize in my case

So what you experience is probably that some parent/ancestor is used as offsetParent which acts the same as your actual element in the browser layout calculation.

There's no other way than defining a proper offsetParent. If you change it on-the-fly, our sensor should act instantly depending on the new offsetParent.

cableray commented 6 years ago

Ok. well, since I think I am ok with using a different offsetParent, I guess I'll just manually set it back to what it was after initializing the sensor, and hope I don't get weird bugs in the future. Presumably though, the offsetParent would be the same as the element that I'm deriving the height from, correct?

marcj commented 6 years ago

Alright, closing for now.