Layout Run Z-order overwritten

[The Raptor Factor]

Making a simple game. Putting a text block over a progress bar hides the block (at run). Putting a solid sprite on top of everything will still display on the bottom (at run).

What's really weird is that the debugger shows the Z-order hasn't changed but nonetheless these elements will be hidden behind other objects. Other simple changes like button text shifting to vertical center which are not displayed in the editing view.

I've tried different browsers and they all do it. Is there a setting somewhere I have wrong? Would this be resolved by previewing in a mobile emulator (if possible)? I have an old smartphone I could hook up for this. Don't even know if that's an option.

[Fishou]

Textboxes and Progress bars are form controls, form controls are always displayed on top (actually, they aren't "in the game" but above), source: https://www.scirra.com/manual/117/textbox
https://www.scirra.com/manual/180/progress-bar

"Form controls are actual HTML elements floating above the game canvas in the HTML page. Therefore, nothing can be displayed on top of a form control, apart from other form controls."

[The Raptor Factor]

Alright. Updated my game to use read-only text boxes with CSS styling transparent background (meant for input) instead of the text blocks (actually meant for display) and it works just fine. When I say it like that the whole system seems stupid...

It also says form controls don't work well with scrolling. That could be a design challenge.

Thanks, @Fishou.

[Fishou]

I am not sure I understand your take on it, but glad you could work it out.

As for scrolling and form controls, you should avoid it whenever you can, it'll be janky (having a form control on a layer that doesn't move (like an HUD layer with a parrallax value of (0, 0)) works, as the form control won't move).

To be fair I try to avoid form controls in C2 games, except for a static menu for exemple, buttons in most cases can be replaced with sprites, progress bars with tiled backgrounds, Filechooser can have a 0 opacity with CSS and with a sprite under it while still being useable, and so on.

Textbox input is the trickiest one however, that's why I say to use it in static menus only.

the Text object (not textbox) however is not a form control (you probably know it but if someone else comes across this topic).