Hamburger menu disappearing (possibly) behind image control

1

I have an odd problem where a Hamburger menu button reliably disappears behind a Bootstrap 5 Image box I’m using as a Header bar any time it is clicked. It can be positioned properly at Design time and appears fine at first during run-time, but it does not survive after it is clicked (touched) on the first time.

I have the hamburger icon positioned top right of the screen with the image box housing a wide (100%) header image consuming the entire width of the screen. This same effect happens if I use the built-in Header object in lieu of the Image box as well.

It appears to be a Z-order issue but the zorder is correct at design time and at initial run-time.

I also tried setting the zorder at runtime using these commands:

imgMainMenuHeader.style = "zIndex:1"
Hamburger2.style = "zIndex:100"

I also tried this version too,

imgMainMenuHeader.style = "z-index:1"
Hamburger2.style = "z-index:100"

This all occurs in my compiled APK running on Android. Have not tested it in webbrowser view.

Anyone have any ideas on how to prevent the Hamburger from disappearing or at least, a way to set it back on top?

Thanks,
-FRC

2

I would test it on the desktop, even making a small project just a Hamburger and an Image. You’ll be able to figure out what is happening much more easily. In the Chrome Console, use the Inspect feature to see what is going on internally.

The correct syntax is

Hamburger2.style="zIndex:1"
3

This particular app is nearly impossible to test as a desktop app the way it is currently constructed (depends heavily on a server-side app delivering various data which shapes the UI).

After some experimentation I noticed a few things,

  1. All BS5 Hamburger components are simply disappearing from the app UI after the first use (an item clicked on). It is not related to a z order issue as far as I can tell. It does not respond to the Visible call or the position calls after wards.
  2. The BS4 Hamburger with exactly the same setup and code does not experience this issue. I placed them side by side as a test, the BS4 works as intended, the BS5 will reliably disappear after use.
  3. The jqWidgets Listbox is in use inside this project and is the most recent change however I did not notice if the issue was occurring prior.
  4. The ‘Common’ objects are used here and there for their Input boxes and Image components.

For now, its working well again using the BS4 Hamburger in place of the BS5. I’m sorry I couldn’t be of more help in the issue.

-FRC

4

I’m glad you have something working for now - but mixing BS4 and BS5 controls in the same project is not recommended. There could be conflicts which will lead to weird things happening.

5

Its certainly possible that’s whats happening. I’ll bear that in mind for ‘version 2’ of the app :slight_smile: