Custom ComboBox not scrolling
-
I used the QtQuick documentation to customize a ComboBox and successfully modified its colors. While the ComboBox generally works as expected, I encountered an issue when it contains a large number of items (around 35–50). The dropdown doesn't allow scrolling, and as a result, not all items are visible at once. I expected the ComboBox to handle this with scrolling but it doesn't. Could you help me identify the cause? Here's my code:
pragma ComponentBehavior: Bound import QtQuick import QtQuick.Controls.Basic import QtQuick.Layouts // Custom CPP Registered Types import AppTheme 1.0 ComboBox { id: control property real dropDownTopMarign: 0 opacity: enabled ? 1.0 : 0.5 delegate: ItemDelegate { id: itemDelegate width: control.width height: 30 required property var model required property int index contentItem: Text { leftPadding: 7 text: itemDelegate.model[control.textRole] color: { if (itemDelegate.highlighted) { Qt.color(AppTheme.colors["UFO_ComboBox_Item_Text_Highlighted"]) } else { Qt.color(AppTheme.colors["UFO_ComboBox_Item_Text_Normal"]) } } font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } background: Rectangle { width: control.width radius: 0 color: itemDelegate.highlighted ? Qt.color(AppTheme.colors["UFO_ComboBox_Item_Background_Highlighted"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Item_Background_Normal"]) } highlighted: control.highlightedIndex === index } contentItem: Text { leftPadding: 20 rightPadding: control.indicator.width + control.spacing text: control.displayText font: control.font color: control.pressed ? Qt.color(AppTheme.colors["UFO_ComboBox_Text_Pressed"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Text_Normal"]) verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { implicitWidth: 120 implicitHeight: 40 radius: 0 color: Qt.color(AppTheme.colors["UFO_ComboBox_Background"]) border.color: control.pressed ? Qt.color(AppTheme.colors["UFO_ComboBox_Border_Pressed"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Border_Normal"]) border.width: control.visualFocus ? 2 : 1 } indicator: Canvas { id: canvas x: control.width - width - control.rightPadding y: control.topPadding + (control.availableHeight - height) / 2 width: 12 height: 8 contextType: "2d" Connections { target: control function onPressedChanged() { canvas.requestPaint() } } onPaint: { context.reset() context.moveTo(0, 0) context.lineTo(width, 0) context.lineTo(width / 2, height) context.closePath() context.fillStyle = control.pressed ? Qt.color(AppTheme.colors["UFO_ComboBox_Arrow_Background_Pressed"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Arrow_Background_Normal"]) context.fill() } } popup: Popup { y: control.height -1 width: control.width implicitHeight: contentItem.implicitHeight padding: 0 contentItem: ListView { implicitHeight: contentHeight clip: true model: control.popup.visible ? control.delegateModel : null currentIndex: control.highlightedIndex ScrollIndicator.vertical: ScrollIndicator {} } background: Rectangle { radius: 0 color: Qt.color(AppTheme.colors["UFO_ComboBox_Popup_Background"]) border.color: Qt.color(AppTheme.colors["UFO_ComboBox_DropBox_Border"]) } } }
-
It seems the issue you're experiencing with the ComboBox not scrolling when there are many items is due to the absence of proper height configuration for the ListView inside the Popup. The ListView needs an explicit height to trigger scrolling behavior, and without it, the dropdown won't scroll even when there are many items.
To fix this, you can add a fixed or constrained height to the ListView, and ensure the ScrollIndicator appears when needed. Here's the updated code for the popup section:
popup: Popup {
y: control.height - 1width: control.width implicitHeight: contentItem.implicitHeight padding: 0 contentItem: ListView { width: parent.width height: Math.min(200, contentHeight) // Constrain the ListView height or set a max height clip: true model: control.popup.visible ? control.delegateModel : null currentIndex: control.highlightedIndex ScrollIndicator.vertical: ScrollIndicator { visible: contentHeight > height // Only show the scroll indicator if the content exceeds the viewable area } } background: Rectangle { radius: 0 color: Qt.color(AppTheme.colors["UFO_ComboBox_Popup_Background"]) border.color: Qt.color(AppTheme.colors["UFO_ComboBox_DropBox_Border"]) }
}