Hey all,
More scrollview questions (so sorry). Does anyone have a process for debugging what is going on here? Whenever I drag down on the scroll view, the list snaps directly back up to the top whenever I let go of my mouse. It also seems like (on the right as you can see) the grey on the bar is closing in on the white from both the top and the bottom. Anyone have any thoughts of what is going on here? All I have in the list are 3 buttons but they extend past the viewport so I should in theory be able to scroll to the bottom of the third one (the purple button).
Looks like the content entity element has not been resized to fit the contents
1 Like
That was exactly it. I wasn’t sure what value it was using to calculate how far it should be scrolling. Thanks.
Hate to pull this thread back up but this seems on topic…
Is there anyway to dynamically resize the content entity to fit its contents? That way you could add more content programmatically during runtime and have the scroll bar respond.
After some investigation I’m going to make a new topic with a full explanation. This isn’t really that relevant here.
Hi @Jake_Johnson,
Since I didn’t see your new thread, I figured I would answer here. When I ran into this need a number of months ago I noticed that he dynamic UI Tutorial had this built in:
https://developer.playcanvas.com/en/tutorials/dynamic-ui-scroll-view/
The relevant code is here:
ScrollVerticalAreaFitter.prototype._onContentChanged = function() {
var layoutGroup = this.entity.layoutgroup;
if (layoutGroup) {
// Get all the children that are a layout element and resize the content element
// and work out the height needed
// Get the padding for the top and bottom
var height = layoutGroup.padding.y + layoutGroup.padding.w;
var layoutChildCount = 0;
var children = this.entity.children;
for (var i = 0; i < children.length; ++i) {
var child = children[i];
// Add the height of layout child to the new height of the content element
if (child.layoutchild) {
layoutChildCount += 1;
height += child.element.height;
}
}
// Add the spacing
height += Math.max(0, layoutChildCount - 1) * layoutGroup.spacing.y;
this.entity.element.height = height;
}
};
You can find the entire script here:
I was also thinking could iterate through all the children and get the min and max xy positions of the element bounds to resize the content rect to. This could be done via the calculatedWidth/Height, anchor and local position?
What do you think @jpaulo ?