MenuStyle doesn't show *itemDelegate.submenuIndicator* Image properly

• The “itemDelegate.submenuIndicator” component doesn’t show up properly; only the top part becomes visible and the rest gets cut off
  The issue was discovered while trying to use the new MenuStyle class (new with Qt 5.3), to apply custom styling to Menu class.

• If I make the font pixels of the Label really large and the make each MenuItem’s row height really high, only then the entire “submenuIndicator” Image set comes to view (anchored to the bottom right of the row).

• The “itemDelegate.checkmarkIndicator” does show up; but the indentation and layout seems incorrect and cannot be modified. Have to adjust spacing by adding spaces to the Label component, which starts from a fixed point, to the right

• This was with Qt 5.3 MSVC 2012 OpenGl 32bit, on Windows 7; haven’t had the chance to test it extensively on Linux/Mac yet

• Adding the code from a simple test app, for reference:
  ------------------------------------------------------------

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.2
import QtQml 2.2 // for Instantiator

Rectangle {
width: 600
height: 600

Rectangle {
id: clickableRect
focus: true

color: "red"
width: 300
height: 300
anchors.centerIn: parent

ExclusiveGroup

{ id: myGroup }

Menu {
id: myMenu

style: MenuStyle {
id: myMenuStyle

frame: Rectangle

{ border.color: "#E7E6E8" }

itemDelegate.background: Rectangle {

border.color: "#E7E6E8"
anchors.leftMargin: 15

color:

{ if ( styleData.selected) return "lightblue"; else return "white"; }

}

itemDelegate.label: Label {

color:

{ if (!styleData.selected) return "grey"; else return "white"; }

text: styleData.text
font.pixelSize: 25 // If this value is really high (e.g. 70), then the row height of each MenuItem increase AND ONLY THEN, does submenu indicator image show up

//anchors.leftMargin: 10 // doesn't do anything
}

itemDelegate.checkmarkIndicator: Rectangle {
//CANNOT specify the alignment or layout for this component. But at least it shows up entirely
color: "blue"
anchors.rightMargin: 15

Image {
fillMode: Image.Tile
source: {
if (styleData.checked)

{ return "menu_selected_checkmark.png"; }

else

{ return ""; }

} // source
}
}

itemDelegate.submenuIndicator: Image

{ // This image doesn't even show up properly. Only the top half of the image shows up. But if the row height of each menu item is increased (by having a LARGE font pixel size), only then it shows properly source: "menu_submenu_arrow_icon.png" fillMode: Image.Tile }

}

MenuItem

{ checkable: true exclusiveGroup: myGroup text: "Item 0" }

MenuItem

{ checkable: true exclusiveGroup: myGroup text: "Item 0" }

Menu {
title: "Submenu"
MenuItem

{ checkable: true exclusiveGroup: myGroup text: "Sub menu Item 0" }

MenuItem

{ text: "Sub menu Item 1" checkable: true exclusiveGroup: myGroup }

} // Sub Menu item

} // Menu

} // Rectangle

MouseArea {
anchors.fill: parent
onClicked:

{ //myFocusScope.focus = false; clickableRect.focus = false; myMenu.popup(); }

}
}