QT ComboBox is drawn in a wrong place

Question

QT 5.6.2 on Ubuntu 18.04 I have a very simple ComboBox

import QtQuick.Controls 1.4
    Row{//box
        Item{width: 0.02 * root.width;  height: 1}//space
        spacing: 0.02 * root.width

        ComboBox{//Recording type
            id: typeCombo
            anchors.bottom: parent

            currentIndex: 2
            model: ["TOWING", "PRE_FLIGHT_CHECKS", "FLIGHT"]
            width: 0.4 * root.width;  height: 0.15 * root.height
        }

        Rectangle{
            id: rectangle

            width: 0.5 * root.width;  height: 0.15 * root.height
            border{color: 'gray'; width: 0.1 * rectangle.height}
            radius: 0.18 * rectangle.height
            clip: true

            onEnabledChanged:  if(!enabled)  textInput.text = ''
            opacity: enabled? 1: 0.3
            visible: ddsObject.isRecorderStation

            TextInput{
                id: textInput
                anchors.centerIn: parent
                font.pixelSize: 0.6 * rectangle.height
                maximumLength: 100
            }

            MouseArea{
                anchors.fill: parent
                onPressed:  parent.border.color = 'magenta'
                onReleased: parent.border.color = 'gray'
                onCanceled:{parent.border.color = 'gray';  execute()}
                onClicked:  execute()
                function execute(){textInput.forceActiveFocus(Qt.OtherFocusReason)}
            }
        }
    }

However, when clicked it is drawn at the bottom right corner of the application window. Also there is this message from the framework:

QmlViewGadgetWidget(0x563561aa31e0) must be a top level window

Any ideas how to fix it? I would expect the pull down menu to be drawn right below the ComboBox element.

---

Could be related to this question. However, the answer said that the issue was fixed long time ago.

Answer 1

You need to anchor ComboBox to your root component. You can achieve this by setting the property anchors.centerIn: root