Padding simply does not work

[tresabhi]

Bug Description

My goal is to creative a center aligned button with some padding using the following code:

export component AppWindow inherits Window {
    HorizontalLayout {
        alignment: center;
        VerticalLayout {
            alignment: center;
            Rectangle {
                background: #ab4aba;
                border-radius: 64px;
                padding: 16px;
                Text {
                    font-size: 16px;
                    text: "Button";
                }
            }
        }
    }
}

However, this is what I get:

This is what I expected:

Reproducible Code (if applicable)

Environment Details

• Slint Version: 1.8.0
• Platform/OS: Windows 11
• Programming Language: Rust
• Backend/Renderer: winit (I believe)

Product Impact

No response

[antis81]

Did you apply the padding to the Text component instead? (Padding in Slint defines the distance to the parent component.)

[antis81]

Apparently the padding is ignored when calculating the initial min-width/min-height properties for the rectangle text. Setting those will make your code work at least.

export component AppWindow inherits Window {
    HorizontalLayout {
        alignment: center;
        VerticalLayout {
            alignment: center;
            Rectangle {
                min-height: button-text.height + 2 * button-text.padding;
                min-width: button-text.width + 2 * button-text.padding;
                background: #ab4aba;
                border-radius: 64px;

                button-text := Text {
                    padding: 16px;
                    font-size: 16px;
                    text: "Button";
                }
            }
        }
    }
}

[bowenxuuu]

According to the Slint documentation, the elements that currently have the padding property are as follows: GridLayout, HorizontalLayout, and VerticalLayout, while Rectangle does not have the padding property.

However, just like what you wrote in the code, if you add the padding property to Rectangle, Slint will not report an error during compilation, but it will not produce any expected effect either, which is really confusing. I don't know if this is an oversight of Slint or intentional.

For Slint, if basic elements such as Rectangle and Window can also support the padding property, it will greatly improve the user experience of layout in many scenarios.

[tresabhi]

It's understandable that I, as an individual with deep roots in web-dev would try adding padding to the parent. As noted above, as @antis81, padding on the child doesn't work either:

Rectangle {
    background: red;
    Text {
        padding: 16px;
        font-size: 16px;
        text: "Button";
    }
}

Nor does adding an intermediate wrapper:

Rectangle {
    background: blue;
    border-radius: 64px;
    padding: 16px;
    Rectangle {
        background: red;
        Text {
            font-size: 16px;
            text: "Button";
        }
    }
}

@antis81's explicit sizing "hack" works:

Rectangle {
    background: blue;
    border-radius: 64px;
    padding: 16px;
    min-width: content.width + 2 * content.padding;
    min-height: content.height + 2 * content.padding;
    content := Text {
        padding: 16px;
        font-size: 16px;
        text: "Button";
    }
}

But this totally defeats the point of the declarative nature of Slint.

[bowenxuuu]

@tresabhi I think the padding added to the parent element should be called "padding", while the padding added to the child element should be called "margin".

// padding
Rectangle {
    padding: 16px;
    background: red;
    Text {
        font-size: 16px;
        text: "Button";
    }
}

// margin
Rectangle {
    background: red;
    Text {
        margin: 16px;
        font-size: 16px;
        text: "Button";
    }
}

However, in the current version of Slint, neither of these two writing methods produces the expected effect.

[tresabhi]

Just like css! And while we're at it a short hand would be nice. In other words, padding: 4px 0 4px 8px would be the padding on the top, right, bottom, and left. And padding: 0 8px could be horizontal and vertical. The more shortcuts the better. Perhaps this should be a separate issue.

[ogoffart]

padding doesn't have any effect on Rectangle elements.
See also issue #6288

I'm going to add a warning when using the padding property when it doesn't have an effect.
In the mean time, i'll close this as a duplicate of #6288 , but thanks everyone for the feedback.