How to dynamically change ComboBox popup width to fit the largest visible delegate?

Nicola Peroni

Hi all,

I'd like to customize my ComboBox by making the popup width dynamic based the maximum width of its visible delegates.
Take as an example the intellisense of qtCreator: when scrolling the intellisense items the popup is horizontally-resized dynamically to fit the largest visible text.

I tried by customizing my ComboBox popup by setting its implicitWidth to the ListView contentWidth but it doesn't work!

Can anyone help me?

Thanks in advance

Nicola Peroni

I noticed that the ListView with the vertical orientation does not call onChildrenRectChanged nor onContentWidthChanged.

Nicola Peroni

I found a possible solution by setting only the delegate implicitWidth (not the width) and the listView width to the its contentItem.childrenRect.width but this seems to be not enough since delegates width don't fit the entire ListView width (and I need this to change delegate style when it is hovered or selected)

    ListView {
        id: lv

        anchors.centerIn: parent

        implicitHeight: 400
        width: contentItem.childrenRect.width
        cacheBuffer: 0

        model: lm
        clip: true

        delegate: Rectangle {
            implicitHeight: 100
            implicitWidth: l.implicitWidth
            color: ma.containsMouse ? "red" : "green"
            border.color: "black"
            border.width: 1

            MouseArea {
                id: ma
                anchors.fill: parent
                hoverEnabled: true
            }

            Label {
                id: l
                anchors.centerIn: parent
                text: name + ": " + number
                font.pixelSize: 15
            }
         }
    }

Setting delegate width to the listView width does not work :(

Any suggestion?

Nicola Peroni

Ok I answer myself but it could be useful to someone...
I found a new solution for the listview width binding that consists on iterating over content item children (delegates) in order to get the maximum implicitWidth.
Now setting delegates width to the listView width works but I don't know whether there is a better solution:

    ListView {
        id: lv

        anchors.centerIn: parent

        implicitHeight: 400
        //width: contentItem.childrenRect.width
        width: {
            var max = 0
            for(var child in lv.contentItem.children)
                max = Math.max(max, lv.contentItem.children[child].implicitWidth)
            return max
        }

        cacheBuffer: 0

        model: lm
        clip: true

        delegate: Rectangle {
            implicitHeight: 100
            implicitWidth: l.implicitWidth
            color: ma.containsMouse ? "red" : "green"
            border.color: "black"
            border.width: 1
            width: lv.width

            MouseArea {
                id: ma
                anchors.fill: parent
                hoverEnabled: true
            }

            Label {
                id: l
                anchors.centerIn: parent
                text: name + ": " + number
                font.pixelSize: 15
            }
         }
    }