I’m trying to nest a ListView along with a header and footer in a VerticalBox, and then later up the custom widgets tree that all gets put in a SizeBox.
The problem is, as far as I can tell, anything you put in a VerticalBox completely ignores the sizebox that the parent applies to it, zooming off past the borders and past the bottom of the screen entirely.
This example has an image 5000 tall in a VerticalBox, which is inside a sizebox only 500 tall. In theory the sizebox should restrain the size of this whole widget to 500, but instead the image “breaks out” and is far longer.
What can I do about this? I can’t put a SizeBox inside the VerticalBox because this whole widget needs to grow vertically to fit into arbitrary parent widgets.
For future readers, I just used a canvas instead of a vertical box.
However this only worked because I only had one component I wanted to stretch. In this case, I set that component to anchor with vertical fill, with the other components anchored above and below, and then on the fill component i put a top and bottom offset to make space for the other components.
I still have no idea how you’d do this if you wanted vertical space to be shared among multiple stretching components. Likely some form of grid, I suppose.
Most container type widgets, by default, don’t clip (crop) the sub-widgets to their bounds. In your provided scenario, the VerticalBox is actually adhering to the overidded size of the SizeBox (you can click on the vertical box to see). What’s happening is if you leave the image set to “auto” in the vertical box slot, it won’t resize itself to fit inside the bounds.
If you want the vertical box to crop the parts outside of its bounds, you set its’ clipping rule to this^
If you want the sub-widgets to resize to try and fit within the bounds, give them a relative fill value^
(Note this “fill” is for filling the “available” space in the bounds, if the “auto” subwidgets are taking up more space than the bounds, the “fill” subwidgets will have no size)
Hope this helps, let me know if I misunderstood anything or if there are other issues you encounter
Adding this to help clarify as it seems that most links in previous posts are broken, and hopefully will help others in the future.
Thanks for pointing out the ‘clipping’ setting for the container types. This ultimately solved my
problem. My problem was that I had a ListView with object widgets being added, but the added widgets would just spill out of the UIwidget that contained it. So after reading your post and many iterations of setting various containers clipping option I fixed it by setting the clipping value to ‘clip to bounds’ for the listview container, leaving the others as Inherit.
I think that the default setting for a Listview for the ‘clipping’ should at the very least be ‘Clip To Bounds’, as that would be the expected behaviour.
