Is this a bug? Funky behavior of sticky footer and scrolling synchronization on multiple dynamic panels

I have problem with a layout I have designed. There are a couple of dynamic panels, one of them with a vertical scroll that moves itself and a nearby panel, but when I scroll up and down they are out of sync at times. They also have a dynamic height and one of them does not adapt at the window resize correctly, while the other does, even thought both of them are running the same script. It is a slightly complicated layout, so I will break out its components to better understand what is going on (screenshots bellow):

  • Appbar. Just a simple toolbar.
  • Grid. A grid of cells that has one column for each day of the month, so it is pretty wide.
  • Headers. A row with the numbers of the month.
  • Details. Details for each row, located to the left of the grid.
  • Info. Not relevant for this case.
  • Totals. A row of cells that contains some calculations for each day of the week.

The info and totals are in a footer that is under the grid if the window is high enough, but must be permanently visible so sticks to the bottom if there is not enough height in the window to show them. The appbar, headers and footer have an inmutable height, but make use of the full width of the window. The details has a fixed width and makes use of whatever height is left by the components on top and underneath it, same as the grid, which has a dynamic width, making use of the remaining width left by details. I recalculate the size of all the components each time the window is resized, as well as I stick the footer to the bottom if the window if is too small. There is a glitchy behavior when the height of the window is changed from small to big, and I do not know if it is something on my side or if it is bug from the tool.

Ideally the grid, headers and footer would be a single table scrollable horizontally and vertically, but because of the sticky footer I had to split them into separate components, making the grid only scrollable vertically and the footer only scrollable horizontally. There is some strange behavior in the vertical scrolling that I guess is somehow linked to the problem with the resizing, but I am not able to figure out what is going on. The vertical scroll of the grid also moves the details, there is something strange going on with the scroll of the grid when the window is made small and later big again (the grid goes out of its boundaries, I scripted it to always make use of the remaining height left by the other components but it is not behaving as expected). Have I made a mistake in the script or is it Axure doing something it shouldn’t?

Live demo.

File:
Layout.rp (799.1 KB)

Some captions to illustrate my case:

  1. View of the layout when the page loads. Everything looks and behaves as expected.

  2. When the page is made shorter the vertical scroll in the grid kicks in, just as expected (enlarge picture to see scroll).

  3. Glitch in the vertical scroll after making the window taller again. The vertical scroll in the grid is still active even thought the window is tall enough to fit the whole component, and there is enough space to stretch it vertically. The window resize action has a script that resizes the grid and the details to make use of the height left by the other components (window height minus the hight of all the other components), so there should be no white spaces. The grid does not properly resize, but details apparently does it, and both are governed by similar scripts, so why does one do it correctly and do other does not? I guess it is linked to the fact that grid has a scroll.

  4. After making the window taller, when scrolling down there is a white space between components that should not exist, the footer should be right under the details and grid. The grid should not have the vertical scroll, so I imagine that it has grown too big for some reason.

Hi j.sanchez,

Thanks for the detailed post! I’ve been looking over RP file, and it looks like the issue is occurring because the height of the Grid dynamic panel was left blank for the first OnWindowResize event. When a field is left blank, it will take the value of what was before it. This is causing the dynamic panel to resize oddly when vertical scrollbars are introduced, as the dynamic panel container itself is switching back and forth from the size defined in the first, second, and third OnPageLoad cases, where the resize action doesn’t sync fast enough with the changing height of the browser.

To remedy the issue, I found the resize worked as expected when putting an actual value into the height field for the “Grid” dynamic panel. That is, rather than leaving the height field empty, I put in:

[[Window.height-Appbar.height-Headers.height-Footer.height]]

where Appbar is referencing your Appbar dynamic panel, Headers is referencing your Headers dynamic panel, and the Footer is referencing your Footer dynamic panel. I’ve edited your file to demonstrate this change. Could you let me know if that works on your end as well?

Last! Just as a heads up - there isn’t a need to fire the OnWindowResize with OnPageLoad as the OnWindowResize fires on load of the page automatically.

Layout_EDIT.rp (798.8 KB)

Hi Jane,

Thanks a ton for your help, that was a very insightful explanation and it completely solved my doubt. I thought it would be a good idea to first set the width of the grid and then set the height in a conditional clause, but now I see that this is not the best practice. Lesson learned for future prototypes, as well as what you said about the OnWindowResize.

Cheers!