Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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



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



  • 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
                }
             }
        }
    

    0_1548087118869_1.png

    0_1548087128148_2.png

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

    Any suggestion?



  • 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
                }
             }
        }
    

Log in to reply