Menu Button - Get rid of down arrow, anchor menu from top right corner
-
I have a toolbar with a toolbutton that calls a menu.
Menu {
id: moreMenu
MenuItem { text: "Redo"}
}
toolBar: ToolBar {
id: mainToolBar
RowLayout{
Item {Layout.fillWidth: true}
ToolButton { iconSource: "more.svg"; menu: moreMenu }
}
}
}Issue #1) In the example above, the "more" icon is the android style three vertical dots. My issue is, while the "more" icon is visible, a black down arrow is overlayed on top of the three dots (I'm in windows, so I'm sure that's the native icon for a menu of this sort). How do I get rid of this black down arrow?
Issue #2) The "moreMenu" button is aligned on the right side of the toolbar. When the menu opens, the top left corner of the menu is anchored to the bottom left corner of the button. As a result, when the menu opens, most of it appears outside the window frame. I would rather the menu open inwards, i.e. the top right corner of the menu anchor to the bottom right corner of the button. If you are struggling to visualize what I'm talking about, both ie and chrome have settings buttons in the top right corner. When you click on them, the menu drops down and to the left. That's the behavior I'm trying to mimic. My button menu drops down and the right, which is outside the window borders.
