@aha_1980
It works ! Thanks alot
:)

Nvm, sorta jumped the gun with the question. Haven't looked at the source, but by inspection it seems the ComboBox's content view covers the underlying mouse area that is used to access the menu.

Setting the rightPadding and leftPadding of the ComboBox appropriately uncovers the clickable region on that side of the ComboBox, so, for example, setting rightPadding to 10 gives a 10px wide clickable region on the right, and likewise for the left.

Checkout the answer I have given here:
https://forum.qt.io/topic/105191/why-isn-t-a-qcombobox-positioned-correctly-in-a-layout

Hi
If you changed to
Dialog::Dialog(QStringList listToLoad, QWidget *parent = 0) ;

Make sure to change it both in .h file and .cpp file so they match.

@FloatFlower.Huang Thanx alot mate

@raven-worx

Ok, a short summary.
I have an App containing a header, a Menu that can be faded in and out and a Stackview displaying different things, depending an the Menu-Selection. All nested in a Scroll area that expands, depending on the height of the qml-file displayed in the stackview and on the visibility of the menu.

To garantie that the Tumbler object is like the default Tumbleritem and that it is always at the same spot and with the same size, it has to be part of the root qml file and hast to be feed with content by the stackview and hast to send the information about the selection back again

That means a alot of signals/slots and/or cross file properties etc.

All in all something I have done before, in c++. But a lot of work for an optical gimmick and I'm tempted to leave the defalt ComboBox and SpinBox objects in there, even so it breaks the mobile-immersion

separate QTreeWidget in a QTreeView and a QStandardItemModel. create a QSortFilterProxyModel and set the QStandardItemModel as its suorce model connect currentTextChanged from the combobox to setFilterFixedString of QSortFilterProxyModel

Hi
Just create a function and use that instead of new directly

QComboBox * MakeDefaultCB(QObject *Parent) { QComboBox * cur= new QComboBox (Parent); cur->addItem(QString("defect 1")); cur->addItem(QString("defect 2")); ... return cur; } dbox1.push_back(MakeDefaultCB(this));

@raven-worx
It works !!! Thank you !!!

Now I just have to see if I can check it into the scene (maybe create a widgetitem for the viewport, I'll see.

@pra7 did you manage to solve it? I am facing the same issue. I cannot apply any stylesheet on a Combobox using QtQuick.Controls 2.2

By default a QComboBox reads and saves its currentText property when being mapped to a data model column. I wonder if this is causing your problem?

I've worked it out. Here's my code for the ComboBox. It has the following behavior:

Currently selected value is highlighted When "Enter" Pressed: ComboBox Closes/loses focus No indicator button has custom background

Code is below:

ComboBox { id: groupSelect y: 3 width: 85 height: 33 model: groupList anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 6 anchors.left: btnGroup.right anchors.leftMargin: 6 Keys.onPressed: { if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { groupSelect.focus = false } } contentItem: Text { color : "#ffffff" text: parent.displayText font.family: "Arial"; font.pixelSize: 16; verticalAlignment: Text.AlignVCenter; horizontalAlignment: Text.AlignLeft; } background: Rectangle{ gradient: Gradient { GradientStop { position: 0.0; color: "#69697C" } GradientStop { position: 1.0; color: "#424251" } } } indicator: Rectangle { } delegate: ItemDelegate { width: groupSelect.width contentItem: Text { text:modelData; horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.family: "Arial"; font.pixelSize: 16; color: "#ffffff" } onClicked: { groupSelect.currentIndex = index listview.currentIndex = index } } popup: Popup { id: groupPopup width: parent.width height: parent.height*parent.count implicitHeight: listview.contentHeight margins: 0 background: Rectangle { color: "#424251" } contentItem: ListView { id: listview anchors.fill: parent model: groupSelect.model boundsBehavior: Flickable.StopAtBounds highlight: Rectangle { color: "#69697C" } spacing: 0 highlightFollowsCurrentItem: true currentIndex: groupSelect.highlightedIndex delegate: groupSelect.delegate } } textRole: "key" ListModel { id: groupList ListElement { key: "Group 1"; } ListElement { key: "Group 2"; } ListElement { key: "Group 3"; } } }

Finally, I made it !!!

1. To implement "Drop Down List" just like Normal Combo

"Drop Down List" need to be on top of all other control "Drop Down List" must be disappear when click outside it

To do that, I need to set the "Root Item" (ApplicationWindow or other Component) as parent of maskMouseArea & recDropDown
(There is a little tricky here and I write a javascript function to return the "Root Item" & "Referred Coordinate" to the Combo - You need this to display the popup by set x, y position)

function getRootComponent(component) { var result = {Component : component, refX : 0, refY : 0 } while (result.Component.parent) { result.refX = result.refX + result.Component.x result.refY = result.refY + result.Component.y result.Component = result.Component.parent } return result; }

When user Click on maskMouseArea it'll close the recDropDown

Bellow is source code of MyComboBox.qml

(Note CommonScript.jsBinding is my function to support binding with Dynamic Property, you can use normal binding)

import QtQuick 2.2 import QtQuick.Controls 1.2 import QtQuick.Controls.Private 1.0 import QtQuick.Controls.Styles 1.2 import "../" import "../commonScripts.js" as CommonScript Rectangle { id: root width: 160 height: MDStyle.comboBoxHeight border.width: 1 border.color: MDStyle.borderColor color: MDStyle.backGroundColor radius: 2 clip: true signal activated(int index) property int currentIndex: -1 property var selectedValue property var selectedItem property string displayMember: "Text" property string valueMember: "Value" property string imageSourceMember: "ImageSource" property bool showIcon: false property int dropDownMinWidth: root.width property int dropDownMaxWidth: 2 * dropDownMinWidth property int maxRowsCount: 6 property var model property bool popupVisible : false property int rowHeight : 28 property string displayText: "" Item { id: privateProperties property var rootAncestor: CommonScript.getRootComponent(root) property int popupWidth : root.dropDownMinWidth property bool popupWidthAutoAdjusted: false } property Component displayItem: Label { id : lblDisplayText anchors.left: parent.left anchors.leftMargin: MDStyle.textFontSize / 2 anchors.right: parent.right anchors.rightMargin: recArrowContainer.width + 2 anchors.verticalCenter: parent.verticalCenter font.family: MDStyle.fontFamily font.pixelSize: MDStyle.textFontSize color: MDStyle.fontColor clip: true text: displayText != "" ? displayText : listItems.selectedIndex >= 0 ? listItems.model[listItems.selectedIndex].binding(displayMember) : "" } Rectangle { id: recControlHover anchors.fill: parent anchors.margins: 2 border.width: 0 color: "#113399FF" visible: clickableArea.containsMouse } //MouseArea to show popup when clicked MouseArea { id: clickableArea anchors.fill: parent hoverEnabled: true onClicked: { root.popupVisible = true return true; } } //Loader for Display Item Loader { id : displayItemLoader anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter sourceComponent: displayItem } //Arrow Image Rectangle { id: recArrowContainer height: parent.height - 2 * anchors.margins width: height - 2 * anchors.margins anchors.top: parent.top anchors.right: parent.right anchors.margins: 1 radius: 2 color: "transparent" Image { id: imgArrow anchors.centerIn: parent width: sourceSize.width height: sourceSize.height source: "qrc:/Images/GUI/metrixa-icon-down-arrow.png" } } //Mask Mouse Area (used to hide Drop Down List when click outside Drop Down List) MouseArea { id: maskMouseArea parent: privateProperties.rootAncestor.Component anchors.fill: parent visible: root.popupVisible onClicked: { root.popupVisible = false return false } z: 9998 } //Drop Down List Rectangle { id: recDropDown parent: privateProperties.rootAncestor.Component width: { return CommonScript.max(root.width, privateProperties.popupWidth + listItems.anchors.leftMargin + listItems.anchors.rightMargin + ddlScrollView.anchors.leftMargin + ddlScrollView.anchors.rightMargin) } height: root.rowHeight * CommonScript.min(root.maxRowsCount, (root.model ? root.model.length : 0)) + ddlScrollView.anchors.topMargin + ddlScrollView.anchors.bottomMargin + listItems.anchors.topMargin + listItems.anchors.bottomMargin clip: true radius:2 x: privateProperties.rootAncestor.refX y: privateProperties.rootAncestor.refY + root.height + 1 border.width: 1 border.color: MDStyle.borderColor color: "#FFFFFF" visible: root.popupVisible z: 9999 ScrollView { id: ddlScrollView anchors.fill: parent anchors.margins: 1 clip: true ListView { id: listItems anchors.left : parent.left anchors.right : parent.right anchors.top : parent.top orientation: Qt.Vertical anchors.margins: 2 height: { //Only count displayed items var visibleItemsCount = 0 for (var i = 0; i < listItems.model.length; i++) { var isVisible = true; if (listItems.model[i].binding("Visible") !== undefined) visible = listItems.model[i].binding("Visible"); if (isVisible) visibleItemsCount = visibleItemsCount + 1 } return CommonScript.min(maxRowsCount, visibleItemsCount) * root.rowHeight } property int selectedIndex: -1 model: root.model delegate: Rectangle { id: recItemContainer width: parent.width height: bVisible ? root.rowHeight : 0 clip: true property var itemModel: model property bool bVisible: CommonScript.jsBinding(recItemContainer, "bVisible", model ? model.modelData : undefined, "Visible", true) property bool bEnable: CommonScript.jsBinding(recItemContainer, "bEnable", model ? model.modelData : undefined, "Enable", true) property bool isHovered: false Rectangle { id: recHilight color: "#663399FF" anchors.fill: parent anchors.margins: 0 radius: 2 visible: index === listItems.selectedIndex } Rectangle { id: recDisabled color: "#666666" anchors.fill: parent anchors.margins: 0 radius: 2 visible: false //!recItemContainer.bEnable } Rectangle { id: recItemHover color: "#333399FF" anchors.fill: parent anchors.margins: 1 radius: 2 visible: itemMouseArea.containsMouse } Loader { id: listItemLoader sourceComponent: listItem //anchors.fill: parent property var model: recItemContainer.itemModel onLoaded: { adjustPopupWidth(); } function adjustPopupWidth() { var pWidth = CommonScript.max(listItemLoader.item.width, root.dropDownMinWidth) if (pWidth > privateProperties.popupWidth) privateProperties.popupWidthAutoAdjusted = true pWidth = CommonScript.max(pWidth, privateProperties.popupWidth) pWidth = CommonScript.min(pWidth, root.dropDownMaxWidth) root.rowHeight = CommonScript.max(listItemLoader.item.height, root.rowHeight) privateProperties.popupWidth = pWidth if (listItemLoader.width == 0) listItemLoader.width = pWidth } } MouseArea { id: itemMouseArea anchors.fill: parent enabled: recItemContainer.bEnable hoverEnabled: true onClicked: { if (recItemContainer.bEnable) { if (listItems.selectedIndex != index) { listItems.selectedIndex = index listItems.updateSelection() activated(index) } root.popupVisible = false } return true } } } onCurrentIndexChanged: { updateSelection() } function updateSelection () { displayText = "" root.currentIndex = listItems.selectedIndex root.selectedValue = listItems.model[listItems.selectedIndex].binding(root.valueMember) root.selectedItem = listItems.model[listItems.selectedIndex] } } } } property Component listItem: Rectangle { width: recImage.width + lblItemText.contentWidth + 2 * lblItemText.anchors.leftMargin height: MDStyle.textBoxHeight Rectangle { id: recImage width: parent.height height: parent.height anchors.top: parent.top anchors.left: parent.left color: "transparent" visible: root.showIcon Image { id: imgItemIcon width: sourceSize.width height: sourceSize.height anchors.centerIn: parent source: CommonScript.jsBinding(imgItemIcon, "source", model ? model.modelData : undefined, imageSourceMember, "") } } Label { id: lblItemText anchors.left: root.showIcon ? recImage.right : parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: font.pixelSize / 2 font.family: MDStyle.fontFamily font.pixelSize: MDStyle.textFontSize property bool bEnable: CommonScript.jsBinding(lblItemText, "bEnable", model ? model.modelData : undefined, "Enable", true) color: bEnable ? MDStyle.fontColor : MDStyle.fontColorDisable clip: true text: CommonScript.jsBinding(lblItemText, "text", model ? model.modelData : undefined, displayMember, "") } } onCurrentIndexChanged: { if (listItems.selectedIndex != currentIndex) listItems.selectedIndex = currentIndex } onSelectedValueChanged: { updateCurrentIndex() } onModelChanged: { updateCurrentIndex() } function updateCurrentIndex() { if (!selectedValue) { displayText = CommonScript.VariesText } else if (selectedValue === undefined) { console.log("Selected Value is undefined") } else { console.log("Selected Value: " + selectedValue) } displayText = "" if (root.currentIndex >= 0) { if (model[root.currentIndex].binding(valueMember) === selectedValue) return; } for (var i = 0; i < model.length; i++) { if (model[i].binding(valueMember) === selectedValue) { root.currentIndex = i; return; } } } }

This is not a known issue. Please report a bug and we'll take a look.

Did you already resolve this? If not, perhaps it would be simpler if you used a regular js array to add your items to the combo box, instead of using the ListModel?

With Qt Quick Controls 2, you can set ComboBox::displayText to anything you like: http://doc-snapshots.qt.io/qt5-5.7/qml-qtquick-controls2-combobox.html#displayText-prop

@gabor53 First get the QLineEdit instance of your QComboBox calling ui->comboBox->lineEdit().
Then connect the editingFinished() signal of that QLineEdit with a slot. In the slot you can call ui->comboBox->lineEdit()->text() to get the string.