stowball / eqio Goto Github PK

I have something like this:

<div class='prl-interface eqio' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>

And have CSS classes like these:

.prl-eqio-\<961\.98, .prl-eqio-\<1169\.98, .prl-eqio-\>962 etc

this does work fine when resizing the browser window so if I end up resizing to width 1000px I get:

<div class='prl-interface eqio prl-eqio->546 prl-eqio->738 prl-eqio-<1169.98 prl-eqio->962' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>

But if I resize using a Script or CSS where let's say I add a right margin of 230px to a 1230px width container to get the same 1000px I get:

<div class='prl-interface eqio prl-eqio-<1169.98' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>

So most of the classes are not added and I lose the styles I could've added on the prl-eqio->962 class for example.
The worst part is that as it could add prl-eqio-<1169.98, it could add prl-eqio->962 instead, making it totally random and unpredictable.

What can I do in this case to fix it?

thanks in advance.

Hi Matt,

I really like the simple approach to have something like container/element queries. While trying to adapt your approach to an Angular directive I realized that the trigger elements (.eqio__trigger) generate a horizontal scrollbar when the width doesn't fit into viewport anymore. As this element may only be visually hidden to make the IntersectionObserver working, the whole idea seems to be limited to some use cases.

Did you use eqio yourself in mobile first projects to build components that self adapt to their parents width?

Thanks,
Markus