Calculate availble space for widget

0
Hi everyone, I have a widget placed in a dataview on a page. At the top/ bottom, there are other dataviews. We want to make sure that the widget takes as much as place, and the whole page is full height. We don't want to have vertical scrollbar for the page. And in Mendix, dataviews are inserted dynamically by javascript so we don't know beforehand the height of dataviews. My question is, by javascript, how could we determine the maxium available space for the widget. Our solution now is having a delay long enough, calculate the height taken by all other component, then resize the widget to the remaining space. However, it looks like a glitch. Do you have better idea/ solution for my problem? Best regards,
asked
1 answers
1

The approach I would take is giving all elements (unique) classes, and with Javascript get the Outerheight() of each item, then subtract that from the total available (window) height.

var Navigation = $('.navigation').outerHeight();

For the delay, I would use the following:

function timeout() {
  try {
    // add code here
  }
  catch(err) {
    console.log(err.message);
  }
}
setTimeout(timeout, 300);

In the case that the user would experience this as a glitch, you could use a css animation to make the contents slide in, rather than appear at once. Let the height start with 0px and animate to the calculated height.

answered