Why does the boxes overlap with each other?

[hbina]

Why does the boxes here overlap with each other? I am simply using the ScrollView widget as shown in the documentation here.

See image below:

Where there's supposed to be 2 rows as shown here:

The code in question, mongodb-documents is just a stringified BSON document so it contains lots of newlines which I assume is the issue here?

import { ScrollView, Button, CheckBox, SpinBox, Slider, GroupBox, LineEdit, ListView,
    ComboBox, HorizontalBox, VerticalBox, GridBox, TabWidget, TextEdit, AboutSixtyFPS } from "sixtyfps_widgets.60";

App := Window {
    title: "Pinky Pie";

    property <[string]> mongodb-databases: [];
    property <[string]> mongodb-collections: [];
    property <[string]> mongodb-documents: [];
    property <bool> mongodb-url-input-enabled: true;
    property <bool> mongodb-database-combobox-enabled: false;
    property <bool> mongodb-collection-combobox-enabled: false;
    property <bool> mongodb-run-query-button-enabled: false;
    property <string> mongodb-url-input-text: "mongodb://localhost:27017";

    callback mongodb-url-edited(string);
    callback mongodb-url-clicked();
    callback mongodb-database-clicked(string);
    callback mongodb-collection-clicked(string);
    callback mongodb-run-query-clicked();
    
    VerticalBox {
        HorizontalBox {
            GroupBox {
                title: "MongoDB URL";
                height: 50px;
                LineEdit {
                    text: mongodb-url-input-text;
                    enabled: mongodb-url-input-enabled;
                    edited(text) => {
                        mongodb-url-edited(text);
                    }
                }

                Button {
                    text : "Connect";
                    enabled: mongodb-url-input-enabled;
                    clicked() => {
                        mongodb-url-clicked();
                    }
                }
            }
        }

        HorizontalBox {
            ComboBox {
                height: 30px;
                model: mongodb-databases;
                enabled: mongodb-database-combobox-enabled;
                current-value: "Please select a table";
                selected(string) => {
                    mongodb-database-clicked(string)
                }
            }
        }

        HorizontalBox {
            ComboBox {
                height: 30px;
                model: mongodb-collections;
                enabled: mongodb-collection-combobox-enabled;
                current-value: "Please select a collection";
                selected(string) => {
                    mongodb-collection-clicked(string)
                }
            }

            Button {
                text: "Open";
                enabled: mongodb-run-query-button-enabled;
                clicked() => {
                    mongodb-run-query-clicked();
                }
            }
        }

        ListView {
            for data in mongodb-documents : Rectangle {
                background: red;
                border-width: 5px;
                border-color: blue;
                clip: false;
                Text {
                    text: data;
                    color: blue;
                }
            }
        }
    }
}

[bjorn]

The Rectangle will not automatically take the size of the Text element inside. You could achieve this with a binding (though I'm not sure it's the best way):

        ListView {
            for data in mongodb-documents : Rectangle {
                background: red;
                border-width: 5px;
                border-color: blue;
                clip: false;
                height: text.height + 10px; // makes rectangle height of text plus space for border
                text := Text {
                    x: 5px; // added to make sure the text isn't on the border
                    x: 5px;
                    text: data;
                    color: blue;
                }
            }
        }

[hbina]

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

I misunderstood this part from the documentation for Rectangle, is it because the parent's size is 0 so everything just collapses?

[bjorn]

No. ListView appears to put its children in a vertical layout, which is why only the width of the rectangle defaults to 100%.