Resize Sensor does not work on a div with content loaded via AJAX

[simonemmott]

Hi.

I've been trying to get the resize sensor to work after I load content into a div with AJAX. It works fine on the div before I change the contents of the div with AJAX. i.e. changing the size of the window causes a change in style within the div so I have it setup okay.

After I change the contents of the div however it does not recognise the size of the div changing as I resize the window.
I have ensured that the div.resize-sensor element which was automatically added is unchanged when I change the contents of the div.

However if I refresh the page after changing the size of the window (causes the contents of the div to be updated via AJAX through a function call onload) the style appropriate for the current div size is correct but changing the window size (hence div size) does not change the style until I once again refresh the page.

specifically the value of the width style in the element div.resize-sensor>div.resize-sensor-expand>div does not change after I have changed the content of the parent div of div.resize-sensor as the size of the parent div changes unlike how it does if I do not change the other contents of the parent div.

Is there a way that I can reinitialise the resize sensor after I have finished manipulating the document.

Cheers
Simon

[stefanwalther]

Hi @simonemmott , having the exactly same issues, did you already find a solution?

Regards
Stefan

[simonemmott]

Yes. The solution I came up with is relatively simple.

I have 2 divs. A container div and an contents div. The resize sensor monitors the container div which contains the contents div and you use AJAX to update the contents of the contents div.

Which works for me.

[pkerpedjiev]

For me calling ResizeSensor on the parent wasn't an option so I created a function that waits until the element is attached to the DOM and then adds the ResizeSensor:

  waitForDOMAttachment(callback) {
    if (!this.mounted)
      return;

    const thisElement = ReactDOM.findDOMNode(this);

    if (document.body.contains(thisElement)) {
      callback();
    } else {
      requestAnimationFrame(() => this.waitForDOMAttachment(callback));
    }
  }

    this.waitForDOMAttachment(() => {
      ElementQueries.listen();
      this.resizeSensor = new ResizeSensor(
        this.element.parentNode, this.updateAfterResize.bind(this),
      );

      this.updateAfterResize();
    });

[simonemmott]

Nice

[edineibauer]

for me, this work, after load the content from Ajax:

setTimeout(function () { ElementQueries.init(); },500);

[simonemmott]

Interesting but surely your just adding a half second delay to the time taken to process the request from the server. probably not a big issue but seems like a hack to me