Customise Dialog button size

[Bob64]

I use Dialog in a few places but one thing that always strikes me is how big the buttons seem. They look out of proportion to the small amount of content that I have in the dialog sometimes.

Is there any way that I can customise the size of the buttons? I have tried assigning a DialogButtonBox rather than relying on the default buttons. I tried setting a smaller height than the default in the DialogButtonBox but the layout goes haywire - I saw the button labels floating outside the boundary of the dialog (the buttons themselves had disappeared!). I also tried setting height in the Button objects inside the DialogButtonBox, but that was just ignored it seemed.

[Shrinidhi Upadhyaya]

Hi @Bob64 ,

• You need to use the delegate property inside the DialogButtonBox .

Note:- You can only use standardButtons in the delegate nothing else.

Sample Code:-

Dialog {
    visible: true
    title: "Dummy Dialog Box"
    width: 400
    height: 400

    DialogButtonBox {
        id: buttonBox

        width: parent.width
        height: 40
        anchors.bottom: parent.bottom
        padding: 0
        standardButtons: StandardButton.Save | StandardButton.Cancel

        onAccepted: console.log("Save clicked")
        onRejected: console.log("Cancel Clicked")

        delegate: Button {
            id: control

            width: buttonBox.width / 2
            height: 40
            anchors.verticalCenter: parent.verticalCenter

            background: Rectangle {
                color: control.down ? "#17a81a" : "#21be2b"
                radius: 2
            }
        }
    }
}

Sample Output:-

• You can set the height you want to the Button, in my code i have set the height to 40.

For more information[https://doc.qt.io/qt-5/qml-qtquick-controls2-dialogbuttonbox.html#delegate-prop]

[Bob64]

Thank you @Shrinidhi-Upadhyaya.

I should have mentioned that I am currently using Qt 5.9.6. In case anyone reading is in a similar position, the enums such as StandardButton.Save need to be replaced with DialogButtonBox.Save (it seems that Dialog.Save works too though it is not documented).

You mentioned the constraint that the delegate may only be used with standardButtons. One thing I might want to do is to relabel the button. In principle all one has to do is to set the text property to the required label but I could not find an obvious way to identify the current button in the delegate and I don't know if one can make any assumptions about the order in which the delegate is invoked for each button. The nearest I could achieve was a hack whereby I test the initial value of text in a Component.onCompleted handler and set new text based on this. However, this won't be robust to internationalisation.