Rotate QtQuick.Controls 2.x Dialog

  • Hello.
    I'm facing a problem right now that I couldn't find any solution for it so far.
    I'm rotating a Main component which is the child of my ApplicationWindow and rotation works pretty well with every component that is used except Dialog (not the native ones of course).
    any idea how to rotate the Dialog component or create an alternative for it?

  •     Dialog{
            id: resultDialog
            width: Math.min("250",root.width*0.65)
            height: children.height
            x: parent.width/2 - width/2
            y: parent.height/2 - height/2
            title: "Calibration Result"
            modal: false
                horizontalAlignment: "AlignLeft"
                width: parent.width
                text: "Calibration status :\n"+status_
            onClosed: {

    one of the dialogs that i created.
    I'm using Qt5.12.4

  • Moderators

    does the following do what you want?

            id: resultDialog
         default property alias contentData:
         Item {
             id: container
             anchors.fill: parent
             rotation: 180
             transformOrigin: Item.Center

    note that this only rotates the content. you would need to add a custom title text item as part of the this rotated content instead of the Dialog's internal one. same for the DialogButtonBox.

  • @raven-worx
    Looks like something can not be overridden, but it doesn't say what exactly

    Cannot override FINAL property

  • Moderators

    ok then simply rename the contentData proeprty to something else

    You may also want to try the workaround mentioned in the comments of QTBUG-57632

  • Thanks for your time.
    solved it for my case, just created a component called CustomDialog.qml and used the bellow code:

        id: root
        default property alias contentData_:
        property alias title_: titleLabel.text //Use title_ instead of original title so the rotation works on title too
        width: Math.min(250,root.parent.width*0.65)
        height: children.height //Don't change this if you want the column layout to be flexible
        x: appRotation===180 ? parent.width/2 + width/2 : parent.width/2 - width/2  //Center of the window according to rotation angle
        y: appRotation===180 ? parent.height/2 + height/2 : parent.height/2 - height/2 //Center of the window according to rotation angle
        modal: true
            id: container
            rotation: appRotation
            width: parent.width
            transformOrigin: Item.Center
                id: titleLabel
                width: parent.width
                text: "Title"
                horizontalAlignment: "AlignLeft"
                Component.onCompleted: {
            Item { //10 pixel of empty space between the title and content
                width: parent.width
                height: 10

    0degree.png 180degree.png

  • Popups follow Window::contentOrientation that you can set to match the rotation that is applied on the content:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    ApplicationWindow {
        id: window
        width: 640
        height: 480
        visible: true
        contentOrientation: listModel.get(comboBox.currentIndex).orientation
        contentItem.rotation: listModel.get(comboBox.currentIndex).rotation
        ComboBox {
            id: comboBox
            textRole: "text"
            anchors.centerIn: parent
            model: ListModel {
                id: listModel
                ListElement { text: "Portrait"; orientation: Qt.PortraitOrientation; rotation: 0 }
                ListElement { text: "Landscape"; orientation: Qt.LandscapeOrientation; rotation: 90 }
                ListElement { text: "Inverted Portrait"; orientation: Qt.InvertedPortraitOrientation; rotation: 180 }
                ListElement { text: "Inverted Landscape"; orientation: Qt.InvertedLandscapeOrientation; rotation: 270 }

  • @jpnurmi-0 said in Rotate QtQuick.Controls 2.x Dialog:


    Great, Thanks.
    Now without any workaround i just added

    contentOrientation: ApplicationBridge.appRotation===0 ? Qt.PortraitOrientation:Qt.InvertedPortraitOrientation

    to my ApplicationWindow in addition to my main component rotation.
    The result will be the same on every component which won't load immediately, like Drawer, Dialog, PopUp ...

  • This post is deleted!

Log in to reply