[Bug] Horizontal menu scroll arrows don't behave well on browser resize

v8.1.28

The scroll arrows for a horizontal menu don't seem to respond robustly to changes in the browser client area width.

My horizontal menu is contained in a flex row, which is on a flex (column) container view.

On the root flex container:

  • default width: 800
  • alignItems: stretch

On the flex row:

  • justify: flex-start
  • alignItems: stretch

On the horizontal menu:

  • grow: 0
  • shrink: 1
  • basis: 1200px

With the browser window set wider than 1200px, on initial page load I get what I would expect to see:

When I resize the browser to smaller than the menu width, no arrow appears:

hzmenu-03

If I reload the page, the arrow appears:

hzmenu-02

At this point I can resize the browser and the arrow dynamically follows the right edge of the client area, as I would expect to see.

However, if I resize the browser wide enough for all the menu items to fit, the arrow remains stuck at the right end of the menu, covering up the last menu item:

Refreshing the browser again returns me to the first image above.

First thing I would suggest is loading your project on a test server or in Docker with the latest version. You're using a version that's a year old now and it's possible this has been fixed. You'd have to go through the changelog in all the versions to check, but it may be quicker to just load it up in Docker and see if the problem persists.

Same behavior on 8.1.41

If you think this is a bug, the best course of action is to call IA and create a ticket. They can verify and then forward appropriately.