SpinBox value not vertically aligned

D_Tec

Hi,

I manually set the height to a spin box to be aligned to some text. Result is that the value is not centered any more.
SpinBox
How can I get the number back in the center on a small spinbox?

The code I use so far:

import QtQuick 2.6
import QtQuick.Controls 2.0

SpinBox {
    id: control
    editable: true

    contentItem: TextInput {
        z: 2
        text: control.textFromValue(control.value, control.locale)

        font: control.font
        color: "#21be2b"
        selectionColor: "#21be2b"
        selectedTextColor: "#ffffff"
        height: control.height
        padding: 0
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter

        readOnly: !control.editable
        validator: control.validator
        inputMethodHints: Qt.ImhFormattedNumbersOnly
    }

    up.indicator: Rectangle {
        x: control.mirrored ? 0 : parent.width - width
        height: parent.height
        implicitWidth: control.width < 80 ? control.width*0.25:40
        implicitHeight: control.height
        color: control.up.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? "#21be2b" : "#bdbebf"

        Text {
            text: "+"
            font.pixelSize: control.font.pixelSize * 2
            color: "#21be2b"
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    down.indicator: Rectangle {
        x: control.mirrored ? parent.width - width : 0
        height: parent.height
        implicitWidth: control.width < 80 ? control.width*0.25:40
        implicitHeight: control.height
        color: control.down.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? "#21be2b" : "#bdbebf"

        Text {
            text: "-"
            font.pixelSize: control.font.pixelSize * 2
            color: "#21be2b"
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    background: Rectangle {
        implicitWidth: 140
        border.color: "#bdbebf"
    }
}

Thanks =)

Markkyboy

Your code, when compiled shows the number where it should be;

Perhaps you should include the 'some text' you want to align with.

D_Tec

In my example I had set the height to 20. At a height of 30 it starts to be centered again. But 30 is too big for my application. Why can't it be smaller than 30 pixels?

Markkyboy

Looks like you copy and pasted the example of Customising SpinBox and you've made subtle alterations to the code. If I change the implicit height/width, the numbers stay centered. Repaste the original code back into your project and try again.

D_Tec

The above code is the code I use. I stored it as NumberInput.qml and included it in my main.qml. Here how I use it as delegate in a ListView:

Component {
                id: itemListDelegate
                Row {
                    spacing: 3

                    Label {
                        id: itemNameLabel
                        text: model.item
                        width: 240
                        clip: true
                        // this results in a height of 20 px

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                itemList.selectedIndex = model.index
                                var pos = mapToGlobal(mouseX, mouseY)

                                if(root.height - itemMenu.height < pos.y){
                                    itemMenu.popup(Qt.point(pos.x,root.height - itemMenu.height))
                                }

                                itemMenu.popup()
                            }
                        }
                    }
                    NumberInput{
                        value: model.amount
                        width: 79
                        height: itemNameLabel.height
                        editable: false

                        onValueModified: {
                            var nWeight = (value - model.amount)*model.weight
                            [...]
                            model.amount = value
                        }
                    }
                    Label {
                        text: model.weight
                        width: 50
                    }
                    Label {
                        text: model.price
                        width: 50
                    }
                }
            }

I see the same issue when using a regular SpinBox
In case I increase the height of the label by font.pixelSize: Qt.application.font.pixelSize*1.8 the Display starts to be okay.

My qtquickcontrols2.conf looks like this

[Controls]
Style=Universal

[Material]
Theme=Light