Babylon.js: GUI enhancements: Dropdown/select, Stackpanel overflow

[aWeirdo]

Feature request

• Link
  http://www.html5gamedevs.com/topic/33982-whats-next/?do=findComment&comment=205681

• Feature description

Dropdown/Selection, like a HTML select element.

Stackpanel overflow scrolling(..slider) when a predefined width or height is set and exceeded (depending on whether the panel is horizontal or vertical).
Being able to predefine height's & width's while the contents are dynamic and scrollable is a widely used feature when designing GUI's

• Additional links that could help implementing the feature:
  I experimented with making a dropdown menu using buttons & stackpanel, don't know if it's the best approach, but perhaps it turns out helpful.
  https://www.babylonjs-playground.com/#H10NI4#1
  As can be seen, it has some rendering bugs due to the render order, i'm not sure how to avoid this, but it can be solved by coding them "lowest first" or manually setting the zIndex.. (see comments in PG)

[ssaket]

Hi All, would love to work on this :)
Any suggestions on how to create the overflow effect ?

-Thanks

[deltakosh]

I suggest tackle the drop down first
The overflow requires scrolling support and we don't have it yet

[aWeirdo]

I have been wondering about the overflow and how it can be done, i haven't had time to test it out.
I apologize if it doesn't make sense, it's quite complicated to explain, but works fine in my mind 😄

Theory,

1 container (fixed width & height),
1 stackPanel,
2 sliders, 1 normal slider for X-axis overflow, 1 rotated slider for Y-axis, size scaled to parent(container) width / height respectively.

If stackPanel width/height > container width/height = display slider(s) respectively, & Capture mouse wheel scrolling & mouse wheel click + move & mouse click + drag on slider -> affect slider -> slider value affects stackPanel top/left values (position/offset inside the container), thus displaying different areas of the stackPanel.

Of course this is just an untested idea, and i'm sure there are better ways of dealing with it by integrating it into the source code instead.

[ssaket]

Awesome ! exactly what I was thinking except I thought of adding "max-width" and "max-height" attribute to containers.