Doesn't apply styles to newly injected container children

[ZeeCoder]

Assume a grid, with items popping in and out of existence, where grid is the container, and the items should have a specific with. When the items are injected, styles are not applied automatically, since recalculation only happens on grid resize.

This is quite an annoyance with React, where components might be mounted / unmounted quite frequently.

A solution would be to pick up on such children using the mutation observer.

[ahmadalfy]

I was able to pick the children using mutation observer but I cannot get reference to the element that has the mutation observer attached to (the container) in order to re-init it or trigger resize ... Still digging

[ZeeCoder]

can't you get the original element that you observe in the callback, as well as the newly injected one?

If that's not possible, we can use a function I've used to traverse the DOM-tree up from the injected element, and get the first one that is registered as a container.

once we have that, we can get the Container instance from the registry.

[ahmadalfy]

There are two separate cases I think should be handled here:

1. Elements that are added to a container that exist. For example check the following product card:

After initializing container query it look like this on smaller width:

When you inject something that change, it won't pick up the style automatically. See "Hello there" below the title not picking the blue color:

2. There is the case where a new card is injected into the system which I think the one you are talking about.

The problem I am facing is that I am trying to handle the first case. The observer mutation has reference to the newly injected element (which is a part of the container, not a new container). In this case we need to traverse the DOM-tree upward till we find the container.

Do I make any sense 😅

[ZeeCoder]

Yeah, that's what I said too. there's a function in the code somewhere that does exactly that: traverses the DOM tree up from a given element until it finds a container element.

Since all cards I assume are Containers themselves, just adding them to the DOM will trigger the CSS adjustments immediately. When I used the "grid" example I meant that if the grid itself is the sole container, then the newly injected grid items will not be adjusted, since the grid itself did not change in size.

So yeah, basically the solution I see is that if a new element is added to a container element, then pick that up with the mutation observer, find the container element by traversing the DOM up, then get the Container instance from the registry and call the adjust method on it.

If you're pressed for time, however, you can always just call that method yourself right after making a change (like adding Hello there). not sure if you use react or not, but the code for that is very simple. 👍

[ahmadalfy]

Do you mean that there is a function that takes a descendant and return its container? Because I checked multiple times and I cannot find it. Still looking though 🔍

[ZeeCoder]

Hmm there's should be. I'll check as well

On Fri, 27 Apr 2018, 23:11 Ahmad Alfy, [email protected] wrote:

Do you mean that there is a function that takes a descendant and return its container? Because I checked multiple times and I cannot find it. Still looking though 🔍

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ZeeCoder/container-query/issues/75#issuecomment-385107185, or mute the thread https://github.com/notifications/unsubscribe-auth/ADglEsT9UH89I9K5MfUV3NTMgLqxlQ2Lks5ts5etgaJpZM4Rkm2U .

[ZeeCoder]

Okay, so the function is only similar, not entirely the same: it's the hasDifferentContainerParent method in adjustContainer.js.

That one accepts a container and an html element, and tells you whether it has a different (more immediate) container parent or not.

It's similar enough though, as it traverses the DOM upwards from the given descendant element, checking whether the parents are registered containers or not.