ScrollView preferred size doesn't apply equaly to the parent on all style

[wuanzhuan]

the popupwindow's parent element is in the red border

[wuanzhuan]

it is right when i remove the scrollview

    popup := PopupWindow {
        x: 12px;
        y: parent.height + 12px;
        
        Rectangle {
            background: Palette.background;
            border-color: Palette.border;
            border-width: 1phx;  
            preferred-width: text-element.preferred-width + 12px;
            preferred-height: text-element.preferred-height + 12px;
            text-element := HorizontalLayout {
                padding: 12px;

                Text {
                    min-width: max(self.font-size * 8, min(self.preferred-width, self.max-width));
                    max-width: self.font-size * 50;
                    min-height: max(self.font-size * 3, self.preferred-height);
                    horizontal-alignment: left;
                    vertical-alignment: center;
                    wrap: word-wrap;
                    text: info;
                    font-weight: Typography.body.font-weight;
                    font-size: Typography.body.font-size;
                }
            }
        }
    }

[wuanzhuan]

when i set x,y of the scrollview, it is right. i think this is a bug.

        ScrollView {
            x: 0;
            y: 0;
            width: rect.preferred-width;
            height: rect.preferred-height;

            rect := Rectangle {
                background: Palette.background;
                border-color: Palette.border;
                border-width: 1phx;
                preferred-width: text-element.preferred-width + 12px;
                preferred-height: text-element.preferred-height + 12px;
                text-element := HorizontalLayout {
                    padding: 12px;
    
                    Text {
                        min-width: max(self.font-size * 8, min(self.preferred-width, self.max-width));
                        max-width: self.font-size * 50;
                        min-height: max(self.font-size * 3, self.preferred-height);
                        horizontal-alignment: left;
                        vertical-alignment: center;
                        wrap: word-wrap;
                        text: info;
                        font-weight: Typography.body.font-weight;
                        font-size: Typography.body.font-size;
                    }
                }
            }
        }

[ogoffart]

I think the problem might be that self.font-size is still zero before the popup is shown as we haven't set the parent window yet, and as a result, the size of the popup is not properly computed (as it needs to be computed before)

[ogoffart]

I tried to reproduce with This slintpad link

As one can see, the popup with is small. But this is not a regression.

I think it is indeed a bug that self.font-size is zero. @tronical : do you agree? @wuanzhuan is that the issue?

[wuanzhuan]

@ogoffart the problem is caused by scrollview's backgroud and xy

the problem code is:

    popup := PopupWindow {
        y: root.height + 1rem;
        
        Rectangle {
            background: Palette.background;
            border-color: Palette.border;
            border-width: 1phx;  

            ScrollView {
                preferred-width: text-element.preferred-width + 12px;
                preferred-height: text-element.preferred-height + 12px;
                text-element := HorizontalLayout {
                    padding: 12px;
    
                    Text {
                        min-width: max(self.font-size * 8, min(self.preferred-width, self.max-width));
                        max-width: self.font-size * 50;
                        min-height: max(self.font-size * 3, self.preferred-height);
                        horizontal-alignment: left;
                        vertical-alignment: center;
                        wrap: word-wrap;
                        text: "hello world xxxxxxxxxxxxx!!!!!!!!!!!!!!!!!!!!";
                        //font-weight: Typography.body.font-weight;
                        font-size: 1rem;
                        color: red;
                    }
                }
            }
        }
    }

[ogoffart]

Could you paste a link to slintpad with the full code that can reproduce the issue?

[wuanzhuan]

@ogoffart sorry i haven't used the slintpad. the full code as follows:

import { AboutSlint, Button, VerticalBox, Palette, ScrollView } from "std-widgets.slint";
export component Demo {
    width: 200px;
    height: 300px;
    VerticalBox {
        alignment: start;
        Text {
            text: "Hello World!";
            font-size: 24px;
            horizontal-alignment: center;
        }
        AboutSlint {
            preferred-height: 150px;
        }
        HorizontalLayout { alignment: center; Button { text: "OK!"; clicked => {popup.show()} } }
    }

    popup := PopupWindow {
        y: root.height + 1rem;
        
        Rectangle {
            background: Palette.background;
            border-color: Palette.border;
            border-width: 1phx;  

            ScrollView {
                preferred-width: text-element.preferred-width + 12px;
                preferred-height: text-element.preferred-height + 12px;
                text-element := HorizontalLayout {
                    padding: 12px;
    
                    Text {
                        min-width: max(self.font-size * 8, min(self.preferred-width, self.max-width));
                        max-width: self.font-size * 50;
                        min-height: max(self.font-size * 3, self.preferred-height);
                        horizontal-alignment: left;
                        vertical-alignment: center;
                        wrap: word-wrap;
                        text: "hello world xxxxxxxxxxxxx!!!!!!!!!!!!!!!!!!!!";
                        //font-weight: Typography.body.font-weight;
                        font-size: 1rem;
                        color: red;
                    }
                }
            }
        }
    }
}

[ogoffart]

I can reproduce the problem with a smaller testcase:

import { AboutSlint, Button, VerticalBox, ScrollView } from "std-widgets.slint";
export component Demo {
    width: 200px;
    height: 300px;

    Rectangle {
       width: r.preferred-width + 4px;
       height: r.preferred-height + 4px;
        
        r := Rectangle {
            background: blue;
            border-color: red;
            border-width: 1phx;  

            s := ScrollView {
                preferred-width: 50px;
                preferred-height: 50px;
            }
        }
    }
}

And indeed, the size is different with Slint 1.3.1 and 1.3.0 with the fluent style. But the other style don't have this problem

[ogoffart]

Bisecting show it was caused by commit 95582e67948ff488c7fe3f5e6302eca4ca21defc

That impacted how the preferred size of parent of the ScrollView got computed.