Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Customise Dialog button size



  • 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.



  • 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:-

    0_1560319352110_ba1928b0-1f8d-4a14-b995-384d5d5b00db-image.png

    • 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]



  • 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.


Log in to reply