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

Stops working after drop event using dragula #185

Open quiringk opened 6 years ago

quiringk commented 6 years ago

I am using css-element-queries successfully in my Angular 2+ project. I have a page with a bunch of different components that have element-queries inside of them. I am also using dragula to allow dragging and dropping of these components for reordering. Everything is working fine until I drop a component after or before another component. Once that happens, the element queries stop working for the component that was dragged and dropped, but continue working for the other components.

I tried firing ElementQueries.init() &/or ElementQueries.update() in the dragula drop event without any success.

I am initializing ElementQueries in each component by calling ElementQueries.update() after the data has loaded but if I called ElementQueries.init() that works fine as well.

Any idea why a dragula drop event would stop the element queries in that dropped component to stop working? Is there a way to "refresh" the element queries to start working again?

marcj commented 6 years ago

Same issue as in https://github.com/marcj/css-element-queries/issues/171 I guess.

quiringk commented 6 years ago

So I figured out a way to capture the drag and drop event, and then I can remove the DOM and re-add it using angulars *ngIf, and then call ElementQueries.update(). However, this seems to make the performance of the page get worse the more I do that. Should I be calling something else at that moment?

marcj commented 6 years ago

Well, we need to add the reset method in our API as described in the linked issue, so you can call it on those elements that have been moved in the DOM. If you could send us a pull-request with that change, we could merge it and you have immediately a real fix.

DmitryEfimenko commented 5 years ago

so, the reset api is added to the ResizeSensor. However, there's no easy way to reset all these elements using ElementQueries. I can submit a PR fixing this. Once that is available, we could easily subscribe to drop events in dragula and call ElementQueries.reset()