Problem with disappearing buttons in ScrollViewer

Questions
1

Hello!

I’m having trouble displaying multiple buttons in a row within a ScrollViewer. When I attempt to include buttons that are initially not visible (requiring scrolling to the side to see them), they don’t load properly. Most of the time, they are not visible at all, but occasionally they flicker in my project’s editor. The buttons do exist; if you widen your screen significantly, they load correctly. However, when they are initially hidden, they fail to appear after scrolling to the right.

I have created a playground example to demonstrate the issue:
Playground Example

I have also prepared a GUI editor example using the same code snippet:
Babylon.js Gui Editor (babylonjs.com)

Should I implement my own ScrollViewer, or is there a different UI option I should consider? Is there a way to make this work?

Thank you for any comments or advice you can provide. :slight_smile:

2

Hello again,
I think I can answer this one (without even requesting additional info from you :sweat_smile: :grin:)
First, I will need to apologize for the dirty PG I rush-created for you, just to demonstrate a couple of things.

I’d like to stress-out here that this is not the ‘recommendable’ version and is only ment for illustrating the following:

  1. Whether through the editor or with code, there’s a logic to extend content within a sv. Point is, it doesn’t work from just adding children. Important to understand here is that the scrollviewer is your main containter. In order to appear on screen at all, it requires a width an height (either in pixels or percentage) and this is basically where you sv will display within the ADT. Simply adding children to this SV, WON’T CHANGE ITS SIZE.

  2. In order to DYNAMICALLY change the size of THE CONTENT of a scrollviewer, you will need another container. This container is likely to be a STACKPANEL. The trick here is that you set NO SIZE to this parent stackpanel (either in width for a horizontal scrollviewer OR in height for a vertical scrollviewer).

  3. Now that you have a parent stackpanel with UNDEFINED width (or height) as a child of your scrollviewer, you can tell this stackpanel to adapt either width or height from its children.

  4. From there, your stackpanel which basically now defines either the width or height of the content of your scrollviewer will now resize from the size of its children. Knowing that making a control not visible (isVisible = false) == display none in CSS. Understand the control is no longer accounted in the calculation of the size. It’s like it is not existing.

So, in the PG above, you can see that

  1. the scrollviewer keeps its size but the content resizes depending on the size of the stackpanel
  2. the stackpanel’s size is adapting to the total size/width of all VISIBLE children/controls
  3. all children display correctly and do not require an update/refresh

Now, when I said this is NOT THE RECOMMENDABLE version, it’s essentially because I believe all of these controls/achievements should be created and added to the stackpanel ‘on the fly’ (or better said when needed or when the achievement is reached). If you don’t know how to do that and are interested, I think I have an example of a chatbox that basically does the same (except it is text input and not images). I would just need to look for the link.

Finally, when using the GUI Editor, I can only advise that you would rename all controls you want to access to have a unique name. If you have more than one control with the same name and try to access it, it will pick only the first one in the hierarchy which is kind of annoying :sweat_smile:

I hope this helps and let me know if you have any questions.
Meanwhile, have a good one :sunglasses:

2 Likes
3

Woow thanks for the long response.
I think you solved it but I have one more small question about this solution.

I actually tried using the stackpanel before I posted this, but I had problem with the spacing. Because for my main resolution the spacing between these “buttons/images” is “85px”. But when I resized the window or opened it on my mobile it didn’t resize “proportionally”. Is there way to set the spacing of childrens in the stack panel to percentages? In the GUI editor on the website it can only be set to px.

If not, it is ok. You helped me a lot to understand it and how it works in the background so I can “cheat” it somehow like adding empty children between two icons that would be the spacing or something. :sweat_smile:

Thanks again for all the advices and your time. You are the best. :heart:

1 Like
4

Ok, I’m not sure to know just exactly where you want to add your padding in percentage mode. It will be yours to make tests and determine the best option. I can however already tell you a couple of things regarding this.

  1. There is still a ‘bug’ of some sort in the editor that eventually converts what should be a simple ‘information’ to an ‘alert’ and prevents from setting percentage mode when mixed with pixel mode.
    In some cases, there’s eventually a go-around: First click on the percentage/pixel mode icon, to set the mode, then change your value. But it doesn’t work in all cases.

  2. You can still change that, by accessing the control in code and change the value.

  3. You can use an alternate way of setting ‘padding’ to these controls. Typically, in your case, your controls are made from an ‘achiev_icon’ and an ‘achiev_panel’ as parts of your achieve_btn. If you would set say a 90% size to these parts (== 90% of the achieve_btn) and center them, you would end-up with a 5% padding on this button.

I hope this helps and feel free to cc me with your attempt. I’m sure we’ll find a way that matches your needs. :smile: