QT QML combobox size

[GISiste]

Hello @ALL,

My mobile app contains a UI to let users doing some requests to select data around here position.

I've two combobox listing the possible values to search. The search function works fine and return the desired results.

Here's the app UI

When I display the values of the combobox (both of them), it takes all the height of the app's window. Is there any way to limit the size of the list and allow the possibility to scroll?

Thanks for your help

Here's my code managing the two combobox:

            Flickable {
                anchors.fill: parent
                contentHeight: optionsLayout.height + 30 * scaleFactor
                GridLayout {
                    columns: 2
                    id: optionsLayout
                    anchors {
                        top: parent.top;
                        topMargin: 10*scaleFactor;
                        leftMargin: 10*scaleFactor;
                        rightMargin: 10*scaleFactor;
                        left: parent.left;
                        right:parent.right;
                    }
                    Text {
                        font.bold: true
                        Layout.columnSpan: 2
                        text : "Liste 1"
                        horizontalAlignment : Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 12 * scaleFactor
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }
                    ComboBox {
                        model:domainesModel
                        Layout.columnSpan: 2
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                        delegate: Item{
                        height: 35 * scaleFactor
                        Row {
                            spacing: 0 * scaleFactor
                            CheckBox {
                                id: checkDis
                                scale : 1.5
                                checkState: checked ? "Checked" : "Unchecked"
                                onClicked: {
                                    myFunction()
                               }
                            }
                            Text {
                                text : libelle
                                horizontalAlignment : Text.AlignLeft
                                verticalAlignment: Text.AlignVCenter
                                font.pixelSize: 12 * scaleFactor
                                height: parent.height
                                elide: Text.ElideRight
                            }
                        }
                      }
                    }
                    Text {
                        font.bold: true
                        Layout.columnSpan: 2
                        text : "Liste 2"
                        horizontalAlignment : Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 12 * scaleFactor
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }
                    ComboBox {
                        model:famillesModel
                        Layout.columnSpan: 2
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                        delegate: Item{
                        height: 35 * scaleFactor
                        Row {
                            spacing: 0*scaleFactor
                            CheckBox {
                                id: checkVis
                                scale : 1.5
                                checkState: checked ? "Checked" : "Unchecked"
                                onClicked: {
                                     myFunction()
                               }
                            }
                            Text {
                                text : libelle
                                horizontalAlignment : Text.AlignLeft
                                verticalAlignment: Text.AlignVCenter
                                font.pixelSize: 12 * scaleFactor
                                height: parent.height
                                elide: Text.ElideRight
                            }
                        }
                      }
                    }
                }
            }

[JamesBallard1]

Hi @GISiste,

A ComboBox in QML should be scrollable by default once it goes off screen. You should be able to limit the height of the combobox by using implicitHeight property.

https://doc.qt.io/qt-6/qml-qtquick-item.html#implicitHeight-prop

[GISiste · Accepted solution]

Hello @JamesBallard1 

Thnaks for replying. 

Actually, I can scroll down in the list if it goes off screen as you said. I've modified the implicitHeight property but It reduces the height of the button itself. Indeed, I would like to limit the height of the popup.

So, I did a workaround, I modified the combobox popup "topMargin" property once the comobox model is set.

myCombobox['popup'].topMargin = 340

So, it looks like this

I always still can scroll down in the list. 

It's what I looked for.

Thanks again for your reply

Regards

[GKmieliauskas]

Hi,

I use solution from here

On form Completed event I use code below:

    Component.onCompleted: {
        reportTypeCombo.popup.contentItem.implicitHeight = Qt.binding(function () {
                return Math.min(app.isLandscape ? 184 : 276, reportTypeCombo.popup.contentItem.contentHeight);
            });
    }

You can set each of your comboxes individualy.

[GISiste]

Hey @GKmieliauskas 

Thanks for your help.

Actually, I saw that post on stackoverflow but didn't test the suggestion. As, I explained in my previous response I modified my compbobx popup "topMargin" property and did the results I looked for. This moves the popup from top to bottom.

Thanks again for your suggestion

Regards