Track display none elements.

[vogdb]

Hi! If element is not displayed(has display: none) during the page construction then it will not get any updates from element-query even in case it is enabled by some user action (like elem.style.display = 'block').

Please look at http://jsbin.com/guwehadeti

The possible solution would be to set temporarily element.style.display = 'block' in ResizeSensor.attachResizeEvent before creating element.resizeSensor and restore it back at the end of the method. But I'm not sure about the correctness of such solution.

@marcj please help.

[vogdb]

To be more precise. In the example that I've attached. The hell div is not displayed at the beginning but it has an element-query

.hell[min-width="600px"] .subHell {
  background-color: #4186ff;
}

After you press the button On!, the hell div appears but its element-query does not work.

[zowers]

@vogdb thanks for the idea, this works for me:

            var reset = function() {
                var saveDisplay = element.style.display;
                element.style.display = 'block';
                expandChild.style.width = expand.offsetWidth + 10 + 'px';
                expandChild.style.height = expand.offsetHeight + 10 + 'px';
                expand.scrollLeft = expand.scrollWidth;
                expand.scrollTop = expand.scrollHeight;
                shrink.scrollLeft = shrink.scrollWidth;
                shrink.scrollTop = shrink.scrollHeight;
                lastWidth = element.offsetWidth;
                lastHeight = element.offsetHeight;
                element.style.display = saveDisplay;
            };

[vogdb]

Good job 👍

[HugoHeneault]

This is quite an issue when using angular -- it simply doesn't work at all.

Is it possible to implement it?
Thanks!

[ryanlin1986]

The ResizeSensor won't work if the element or its parent has display:none.
Doesn't have a elegant solution yet, have to manually ensure the resize sensor only be called when element and its parents is visible.
Any idea to improve this?

[zowers]

can you use workaround from comment #46 (comment) ?

[marcj]

Mh, so I understand you guys: What is the need of a resize event / element query when it is actually not even visible?

[HugoHeneault]

We need to size it properly for the time it will display.

If I hide a div at load and want to show it after 10s, it will be ignored at load (normal) and when I display it later... :/

[marcj]

Ah, so a event is necessary when it becomes visible to apply the correct styles right?

[HugoHeneault]

Exact. If elements are hidden on load, styles are never applied.