Context Menu clipped by main window

D_Tec

Hi,

in my QML app I use a ListView. The elements in that list have a context menu. In case I right click on an item at the bottom of my list, the context menu is clipped by the main window.

To open the context menu I use itemMenu.popup() where itemMenu is my context menu. According to the docs popup() opens the menu at the location of my curser. That is what I want but only if there is enough space. In case there is not enough space the menu should either scroll or be moved so that the bottom is a the bottom of my main window. Is it possible to achiev that? I am open to redo my entire menu code if neccessary. I saw a YouTube video where they excactly showed what I want. It is nine years old the linke to the code is dead but I hope that is still possible.

Some additional information:
Currently I am working with Menu from QtQuick.Controls 2.12
I do not know the sice of the menu because items are added dynamically
The menu contains a sub menu that also should not be clipped

Thanks

Bob64

@D_Tec You could add a ScrollBar or ScrollIndicator to your ListView. This can be as simple as doing the following:

     ListView {
         ... // Your existing code
         ScrollIndicator.vertical: ScrollIndicator { }
      }

D_Tec

The ListView already does scroll, this is not my issue. But the ListView extents to the bottom of my main window. In case I want to use the context menu on the last item I will only see the first entry of my context menu =(
I hoped that there is a setting that corrects the position of the context menu to be fully visible.

Bob64

@D_Tec Yes, of course you are correct. My apologies. You may specify the position of the popup before showing it but that will need you to be able to calculate its expected length and use that in conjunction with the main window geometry. However, I don't know how easy it is in general to obtain the size of a dynamic popup before it is shown. If you know how many items are in your model and each item is shown with a constant height, and take account of any padding etc., you can probably figure it out but it might be a bit painful to get right.

D_Tec

Mybe it is not such a pain but I am wondering that nobody else seems to have this issue. I did not find anything regarding this online.

I should be able to now how many items will be in my menu. I only need to change my y coordinate to window.height - menuHeight in case menuHeight is larger than window.heigt - mouse.y or so...

D_Tec

It was really not that hard. Here is my solution:

MouseArea { // Mouse area of the element that should have a context menu
    anchors.fill: parent
    onClicked: {
        var pos = mapToGlobal(mouseX, mouseY)
        //root.height is the main window heigt
        //itemMenu is the id of the context menu
        if(root.height - itemMenu.height < pos.y){
            itemMenu.popup(Qt.point(pos.x,root.height - itemMenu.height))
        }

        itemMenu.popup()
    }
}

For the sub menu it was a bit more difficult because I needed to add a mouse area.

Menu {
    id: itemMenu

    MenuItem {
        text: qsTr("Context 1")

        MouseArea {
            anchors.fill: parent

            onClicked: {
                var pos = mapToGlobal(mouseX, mouseY)

                if(root.height - itemSubMenu.height < pos.y){
                    itemSubMenu.popup(Qt.point(pos.x,root.height - itemMenu.height))
                }

                itemSubMenu.popup()
            }
        }

        Menu {
            id: itemSubMenu
            title: qsTr("Title")

            MenuItem {
                text: qsTr("SubMenu1")
            }
            // needed to add this because otherwise the context menu is not closed after a sub menu item is selected
            onClosed: {
                itemMenu.close()
            }
        }
    }
    MenuItem {
        text: qsTr("Context 2")
    }
}

Mybe this can be done nicer but I hope that this is added to Menu by default.