responsive sizes?

[gcb]

is it possible to have something with min-width: content so that it fill the entire space, but shows a scroll bar if the space is not large enough?

e.g.

            ListView {
                for data in my_content : Rectangle {
                    height: 30px;
                    min-width: auto;
                    max-width: 100%;
                    Text {
                        text: data.name;
                    }
             }

[hunger]

I do not see what you are trying to do here... Why do you set the min-width/max-width at all?

[gcb]

Because I do want the Rectangle/Text element to grow larger than the parent list and show a scroll bar when the content is larger than the list area. But they seems to default to parent.width when i do not specify any width, e.g.:

    ListView {
        for data in input_ports : Rectangle {
            height: 30px;
            Text {
                text: data.name;
            }

[hunger]

How about putting a ScrollView into the item then?

[gcb]

How about putting a ScrollView into the item then?

Won't a scroll on each element would look weird? ...And that still wouldn't fix anything i guess, as I still have no idea how to size the Text to the content.

All I want to is to have Text.width (or min-width) to be just enough to contains the text it is showing.

[gcb]

More information:

• Text do not have any width information. The manual says "If the width and height properties are not set, the text will be expand in a single line." but that is not the case as you can see by the clipped text in the screenshot.

• Text is inside a Rectangle, which only have height set, no width. The manual says "When not part of a layout, its width and height default to 100% of the parent element."... what does it mean "not part of a layout"?

Does being inside a ListView makes it be 100% of the listview (parent) width? And if it were directly under a gridLayout it would be 100% of the inner contents (or something else)?

[gcb]

Would this be a consequence of #407? Any workaround to force the Text/Rectangle width on "loop build time"? e.g. some way to get the string rendered width? or to force the layout calculation after populating the list?

[hunger]

The problem I see (now, sorry for not seeing it earlier) is that the Rectangle may have any width, that is independent of the Text inside it. And that width is used by the ListView to calculate its size. You can either set the Rectangle's width based on the Text width or you can use any Layout to do that for you.

Try this:

    ListView {
        for data in my_content : Rectangle {
            height: 30px;
            width: t.preferred-width; // That's the "natural" width of the Text element we named `t`

            t := Text {
                text: data.name;
            }
    }

or this:

    ListView {
        for data in my_content : VerticalLayout {
            t := Text {
                text: data.name;
            }
    }

(in this simple case a HorizontalLayout would also work, it just matters once there is more than one child).

Slintpad.com (or the live-preview) is a nice way to see sizes for elements... just open the preview and move the cursor on the element name and it should highlight all occurences of that Element with a frame showing position and size.

[gcb]

Interesting, only found Doc>Layout>CommonProperties after searching for that prefered-width property you mentioned, it makes sense it applies to Text since the Text page mentions default widths, but since that page is under Layout components i didn't assume it... Thank you so much for the help!

Leaving the resulting code here in case others are looking for solutions to this:

Things are turning more complex than i wished Though. Because I have a Image+Text and I want to highlight the selected row in the ListView holding them, i have to have both a Rectangle around them and a touchArea on top.

            ListView {
                width: parent.width; // prevents "leaking" under the gridlayout and force to show the scrollbars
                for data in input_ports : HorizontalLayout {
                  width: Math.max((t.preferred-width + i.width + g.spacing-horizontal), parent.width); // spacing*(child_count-1)... only have 2 for now.
                  Rectangle {
                    background: data.index == root.selected_port ? #666666 : #333333;
                    height: 32px;
                    width: parent.width;
                    g := GridLayout {
                        x: 0px;
                        spacing-horizontal: 5px;
                        spacing-vertical: 2px;
                        i := Image {
                            image-fit: contain;
                            source: (data.index == ".n/a")
                                ? @image-url("icons/unplug.svg")
                                : ((data.index == ".virtual")
                                    ? @image-url("icons/instrument.svg")
                                    : @image-url("icons/plug.svg"));
                            width: 30px;
                            height: 30px;
                        }
                        t := Text {
                            text: data.name;
                            horizontal-alignment: TextHorizontalAlignment.left;
                            vertical-alignment: TextVerticalAlignment.center;
                        }
                    }
                    TouchArea {
                        clicked => {
                            root.selected_port = data.index;
                            root.changed();
                        }
                    }
                  }
                }
            }

Your suggestion almost got me there, but now I need to keep all elements to a width of a global property and set the Math.max above to that property to avoid:

...guess I should consider patches to the listview to handle selection color as it will be easier in the end :)

PS: not fan of the UI designer (asides from debugging stacked elements and boundaries) because (at least the code-oss one) is somewhat buggy.

[gcb]

lol. Spoke too soon. that whole thing depends on ListView having an actual width, but I cannot set one...

I had Window{min-width:...}, inside it a GridLayout{width:parent.width} and then finally the ListView{width: parent.width}... but unless I lock the window width this doesn't work.

So now either I have resizable window, which requries responsive sizes, or I have responsive sizes, but without resizable window.