Color background for Label

GrahamLa

Hi
I know how to set the background color for a label -
this is my main qml that does this

ApplicationWindow {
    visible: true
    title: "Basic layouts"
    property int margin: 11


    Label {
        id: label
        text: qsTr("Frame Title")
        leftPadding: 17
        font.pointSize: 17
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        color: "red"

        background: Rectangle {
            color: "black"
        }
    }
}

Now if move the code for the label into its own component and instantiate it from main

MyLabel

import QtQuick 2.0
import QtQuick.Controls 2.5

Rectangle {
    Label {
        id: label
        text: qsTr("Frame Title")
        leftPadding: 17
        font.pointSize: 17
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        color: "red"

        background: Rectangle {
            color: "black"
        }
    }
}

main -

ApplicationWindow {
    visible: true
    title: "Basic layouts"
    property int margin: 11

    MyLabel {

    }
}

Running this results in the background color being lost.
What is happening here?

Thanks

J.Hilk

hi @GrahamLa

your MyLabel and therefore the (root)Rectangle inside your QML file has no size and is not part of a layout -> size is 0,0 and no background is drawn.

You see a text because the Textelement by default allows drawing outside its actual bounds.

GrahamLa

Thanks for a good explanation