Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery $(window).height() incorrect after window maximized then restored to original size

I have a function that uses window height to set a bootstrapTable’s height. In addition, I’m using a resize event listener to change the height of the table if the window is resized.

This is inside an electron project on a windows machine.

This is the first part of the code which is triggered when a button is clicked:

  var $table = $("#results-table");
  var $availableHeight =
    $(window).height() -
    $("#results-header").outerHeight(true) -
    $("#search-section").outerHeight(true) -
    50;

  $table
  .bootstrapTable("destroy")
  .bootstrapTable({ data: data, height: $availableHeight });

If I log the window height to console I get a window height of 835px which is correct and the table is sized as I expect.

This is the same code within a window resize event listener:

window.addEventListener("resize", function (event) {
  var $table = $("#results-table");
  var $tableData = $table.bootstrapTable("getData");
  var $availableHeight =
    $(window).height() -
    $("#results-header").outerHeight(true) -
    $("#search-section").outerHeight(true) -
    50;

  $table
    .bootstrapTable("destroy")
    .bootstrapTable({ data: $tableData, height: $availableHeight });
});

If I maximize the window the table resizes correctly. Unfortunately when I restore the window back to its original size (by clicking the min/max button again) and log window height to console it now shows as 818px even though the window size has not actually changed (it is still has a height of 835px). This causes my table to be slightly shorter than it was originally.

I haven’t been able to figure out why this is happening.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using setTimeout to get window height after rendering completed, $(window).height(), and document.documentElement.clientHeight all return the same inconsistent results (835px after the window is initiated and 818px after it's been maximized/restored to the original size).

    window.innerHeight consistently returned 835px so that was my solution.


  2. 0

    Try these approaches:

    1. Debounce Resize:

      let resizeTimeout;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(resizeTable, 100);
});

function resizeTable() {
  // Your table resizing code here
}

    2. Use document.documentElement.clientHeight instead of $(window).height() for stable height measurements.

    3. Electron Resize Workaround: Use Electron’s BrowserWindow API to get accurate dimensions on resize.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search