QML Column: Items placed on top of each other

[maxwell31]

Hi,

I try to use the Column to automatically layout two custom components:

GroupBox {
    id: groupBox
    width: 300
    height: 300
    title: qsTr("Y-Axis")

    Column {
        anchors.fill: parent

        DoubleInput {
            text: "lower limit"
            height:30
        }
        DoubleInput {
            text: "upper limit"
        }

    }
}

Here is my custom DoubleInput:

import QtQuick 2.12
import QtQuick.Controls 2.5
import Style 1.0

Item {
    id: root
    property string text: ""
    property double value: 0.0
    property int spacing: 20
    property int labelWidth: 100
    signal editingFinished(real value)
    height: input.height
    implicitHeight: input.height
    Text {
        id: label
        font.pixelSize: Style.fontSizeLabel
        anchors.baseline: input.baseline
        text: qsTr(root.text)
    }
    TextField {
        id: input
        x: labelWidth+spacing
        font.pixelSize: Style.fontSizeLabel
        validator: DoubleValidator{
            locale: "C"
        }
        text: value.toPrecision()
        onEditingFinished: {
            root.editingFinished(parseFloat(text))
        }
    }
}

The result looks like this:

What am I missing?

[ODБOï]

hi @maxwell31
One option is to set height/width explicitly

  Column {
            anchors.fill: parent
            DoubleInput {
                text: "lower limit"
                height:30
                width: 90
            }
            DoubleInput {
                text: "upper limit"
                  height:30
                  width: 90
            }
        }

you can also use ColumnLayout instead of Column

    ColumnLayout {
            anchors.fill: parent
            DoubleInput {
                text: "lower limit"
            }
            DoubleInput {
                text: "upper limit"
            }
        }

[Shrinidhi Upadhyaya]

Hi @maxwell31 , you can make use of RowLayout in DoubleInput.qml and in main.qml instead of Column you can use ColumnLayout.

Below is the code with few changes:-

main.qml

GroupBox {
    id: groupBox

    width: 300
    height: 300
    title: qsTr("Y-Axis")

    ColumnLayout {
        anchors.fill: parent

        DoubleInput {
            Layout.fillHeight: true
            Layout.fillWidth: true
            text: "lower limit"
        }

        DoubleInput {
            Layout.fillHeight: true
            Layout.fillWidth: true
            text: "upper limit"
        }
    }
}

DoubleInput.qml

Item {
  id: root

//####Instead of using 2 more variables you can alias the properties
//    property string text: ""
//    property int spacing: 20
property alias text: label.text
property alias spacing: mainRowLayout.spacing
property int labelWidth: 100
property double value: 0.0
signal editingFinished(real value)

RowLayout {
    id: mainRowLayout

    anchors.fill: parent
    spacing: 20

    Text {
        id: label

        Layout.fillWidth: true
 //####If you want you can also specify the height by using Layout.preferredHeight or Layout.fillHeight
    }

    TextField {
        id: input

        //####You can avoid this as you can use RowLayout
       //            x: labelWidth+spacing
        Layout.fillWidth: true
      //####If you want you can also specify the height by using Layout.preferredHeight or Layout.fillHeight 
      
        validator: DoubleValidator{
            locale: "C"
        }
        text: value.toPrecision()

        onEditingFinished: {
            root.editingFinished(parseFloat(text))
        }
      }
   }
 }

Output:-

[maxwell31]

Ok, so the problem with using just Column was that it needs both implicitWidth and implicitHeight set. I only set implicitHeight as I thought the width would be irrelevant to the layout.

Thanks