Issue with sidebar resizing: Strange gap + sidebar shrinks on page refresh

[CodeDook]

I am experiencing a strange issue where there's a weird gap between the right edge of the sidebar and the page content, but whenever I resize the sidebar, that gap disappears and upon refreshing the page, the sidebar has shrunk slightly by itself and the gap returns. It is more pronounced on mobile but happens on both desktop and mobile.

I'm using the latest Doxygen v1.12.0 and Doxygen Awesome v2.3.4 in Base theme. I have tested disabling all the extensions but this doesn't change anything.

I've done some investigation of my own and I think I've found the issue. In resize.js, which I think is bundled with Doxygen and not Doxygen Awesome(?), there is a variable named barWidth. For whatever reason, this is subtracted from the actual sidebar width when calculating the width of the content and also the value saved to the cookie, thus causing both issues as the actual width and the width JavaScript is using differ. Setting barWidth to 0 solves the problem. Unfortunately, since this script is supplied with Doxygen, any changes are erased when running Doxygen again.

[jothepro]

Thanks for tracking down the source of the problem! I was aware of it but unable to fix it so far.

[TedMcManus]

I found a programmatic workaround for this bug for anyone interested (ie, this will work even if you reload doxygen).

First, define your own custom.js containing this code (or add it to an existing js file):

$(function () {
  // Wait until Doxygen’s navtree initializes and attaches "resizable" to the side-nav
  // Then override the resize callback for all targets named "side-nav-resizable"
  const target = $(".side-nav-resizable");

  // Unbind the original resizable instance
  if (target.hasClass("ui-resizable")) {
    target.resizable("destroy");
  }

  // Rebind the resizable instance
  target.resizable({
    handles: "e", // east edge of the nav
    resize: function (e, ui) {
      resizeWidth(false); // Turn off dynamic resize
    }
  });
});

This code will wait until doxygen runs and creates the nav tree, then unbind the "resizable" property so JS can't call it to resize the element. However, you can still interact with it and resize the nav tree yourself.

Make sure to source the custom.js file by editing your doxyfile to add it to HTML_EXTRA_FILES and potentially insert

<script src="$relpath^custom.js"></script>

into your header.html file to make sure it's sourced.

[jothepro]

I can't tell why but this seems to be fixed in v2.4.0.