Hi,
I have another question about GUI layout. I have a grid with each cell being a scroll view containing a stack panel. I would like the controls in the stack panel to have height defined in percent so that they are responsive however the height of the stack pannel is determined from the cumulative height of its children so ideally I would have a minHeight on the stack panel but it could grow beyond that.
Here is a PG that shows what I mean: Babylon.js Playground
Interesting. Sounds kind of contradictory though. If the controls inside the stackpanel use a height in percentage (of the height of the stackpanel) I don’t see how these controls can actually act on the size/percentage of the panel? On the other hand, yes, with css and min and max we can do these kind of things, yes?
I will follow and see what kind of input we can get on this from the experts but so far found nothing comparable in the BJS GUI myself… following…
Edit: I actually did find some sort of go-around for this and then, for my usage. Don’t know if this can work for you.
Basically, since each stackpanel can be considered as a container or a grid inside the grid, I ended-up stacking them in this way: 1) The ‘outside’ container/stackpanel covers the max area. 2 and next) The second container inside hosts (a part of) dynamic controls, or a scrollviewer, etc…). 3) The next and lower parts controls are hosted in a third/4th,etc… stackpanel. An imbrication game, in a way;) …but I’m sorry I do not know at this very moment of a sexier or easier method using the BJS GUI. @msDestiny14 I’m eager to learn if there is a better way…
I think this makes sense. I’m still trying to wrap my head around what exactly we want here. A stack panel that does grow when we add controls inside it?
I suppose it is basically around the concept of having a min- and a max- height/width. The way I understand it and the way I found the BJS GUI ‘cumbersome’ when compared to css. The BJS GUI takes a lot from the css structure and approach, in fact, so much you’d nearly think you are doing css. But then, there are some points where (I) wasn’t quite sure. So, in short yes, in this case I believe what @MarkM is looking for is a way to make the container grow depending on the hosted controls and/or panels (correct me if I’m wrong)… but I think it might be more of a general approach on how to handle ‘responsiveness’…
Edit: may be this approach on containers and controls could also help fix some XR issues I have lately seen growing in the forum… It seems there is something (just something) with the way you handle containers and controls… hence, my question and pinging.
Yes @mawa that is pretty much what I was after. @msDestiny14, perhaps it will help if I clarify the desired outcome. Essentially what I want is a responsive grid where each cell contains dynamic content, ie controls can be added and I don’t know before hand how many controls will be in a cell. The size of the controls also needs to be responsive so it looks ok on various screen sizes. Ideally the size of the controls would be expressed as a percent of the size of the cell.
Now, currently I can use a scrollviewer with a child stackpanel in the cell but then the children of the stack panel must have a fixed height, thus the responsiveness is broken. I can set the height of the stack panel to 100% and then use a percent size for its children but then it will never scroll and overflow content will be clipped.
