Actual page height of Mendix page (including part only visible after scrolling)

Hi all, I am working on a custom widget. For this I need to get the actual height of the Mendix page, so not only the height of the part that you actually see. On a non-Mendix page this piece of javascript code would do the trick: var body = document.body, html= document.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight,html.offsetHeight ); But, in my Mendix page this does not work. The only way I can do it is by quering the 'mx-placeholders' and getting the highest number for the height. This, I think, is not really generic.  Does anybody know of a more generic solution to retrieve this actual height of a Mendix page, irrelevant of what mx-placeholders are put onto it? Thanks!
2 answers

I also tried this, looping through all DOMnodes and finding the maximum of the heights, but this is still not a full solution I would say.


var all = document.getElementsByTagName("*");
var maxHeight = 0;
for (var i=0, max=all.length; i < max; i++) {
      var thisH = all[i].clientHeight;
   if (thisH > maxHeight) { maxHeight = thisH; }



You know your DOM, so pick the biggest outlining container. Hopefully it has a class, otherwise you'll need a different selector.

Using BODY or HTML won't always work because of the inherrent height styling/rendering options of your embedded elements.


var heightDiv = dojo.query('.your-class-selector')[0],
    height = heightDiv.clientHeight;

    // your thing

If you are using layouts, pinpointing your container is easier.

The problem is, you have to wait for your page content to finish loading and sizing.

So you could execute the code n-times spaced t-seconds uset setTimeout(fn, ms):

setTimeout(dojo.hitch(this, this._updateRendering), 1000);
setTimeout(dojo.hitch(this, this._updateRendering), 1500);
setTimeout(dojo.hitch(this, this._updateRendering), 2000);
setTimeout(dojo.hitch(this, this._updateRendering), 2500);
setTimeout(dojo.hitch(this, this._updateRendering), 3000)


I've tried all the other ways that are compatible with all browsers. 

You could also do some fancy code with MutationObservers in modern browsers, or if you don't have any flexible height changing widgets in your page like template grid, listview or data grids etc, you could hook into your onnavigation even on your mxform.

Your last option is to submit a request to R&D for an after render event ;)