How does "ScrollView" work with dynamic elements?

[Antonio225t]

With "dynamic elements" I mean something like this:

component CustomComponent {
    in-out property <bool> show-contents: false;
    
    VerticalBox {
        Button {
            text: "Click me to show the elements!";
            clicked => {root.show-contents = !root.show-contents}
        }
        ScrollView { // The ScrollView I'm trying to resize
            if root.show-contents:
                VerticalBox { // Let's pretend that this is a for loop showing a list of some things got from a database...
                    Button {
                        text: "Button 1";
                    }
                    Button {
                        text: "Button 2";
                    }
                    Button {
                        text: "Button 3";
                    }
                }
        }
    }
}

Like a conditional that shows elements.

The issue with this is that when I click the button it does not show the contents... Or more likely... It doesn't show them because the ScrollView's height is stuck at 21px for some reasons.

I basically need to specify height: 200px; or preferred-height: 200px; and I tried setting it to 100% but it still does not show anything (stuck on 21px height)...

How do I make the ScrollView get the remaning height of the window app?
Thanks in advance.

[Antonio225t]

So, the workaround that I found is by setting the height to this: height: (34px + 20px) * root.buttons.length > 200px ? 200px : (34px + 20px) * root.buttons.length; if we pretend that the buttons are stored in a list.

I originally tried to get the height of a button by putting the "click me to show the content" button in a variable and then doing like height: btn.height * root.buttons.length; in the ScrollView but it causes a loop (??) and doesn't compile so I scrapped that and used 34px for the button height and 20px extra for some spacing.

[hunger]

Great that you found a work-around.

You should be able to make this a bit shorter using self.viewport-height.

E.g.

height: self.viewport-height > 200px ? 200px : self.viewport-height;

[Antonio225t]

I tried it

height: !root.show-content ? 0px : self.viewport-height;

But it still says The binding for the property 'height' is part of a binding loop am I doing something wrong?