QML DropDown Border Issue (Qt-5.3.2)

econsysqtdev

Hello all,

We are developing an application on IMX6 using Qt 5.3.2. The Qt libraries are provided by Yocto.

Our requirement is to list items inside a drop down menu using a particular background style. For this purpose we are using ComboBox provided by Qt Quick Controls and QtQuick.Controls.Styles for customizing the drop down background style. We are using MenuStyle component to customize the drop down.

When we apply the styles, we observed that the drop down bottom border does not close.

Please use the following link to view the picture.

We are not facing this issue in the Desktop. We tried running the same application on Ubuntu 12.04.

https://www.dropbox.com/s/33a57jaxs452c4r/IMX6.JPG?dl=0

https://www.dropbox.com/s/cmvvf3ytxg615q8/Ubuntu.JPG?dl=0

Also, below I've listed the qml code which we used for Customizing the drop down.

@
ComboBox { // CustomComboBox
id: comboFilterBy
x: 10
y: 130
z:1
width: 285
height: 39
model : eventFiltersList

        Rectangle {
            id: arrow
            anchors.right: parent.right
            width: 20; height: parent.height
            border.color: "black"
            border.width: 1
            Image {
                id: arrowIcon
                //            anchors.fill: parent
                width: 10
                height: arrow.height
                anchors.centerIn: parent
                clip: true
                smooth: true
                fillMode: Image.PreserveAspectFit
                source: "images/dropDownArrow.png"
            }
        }

        style: ComboBoxStyle {
            background:
                Rectangle {
                color: "#FFFFFF"
                border.width: 1
                border.color: "black"
                antialiasing: true
            }

            label: Text {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.left
                font.pointSize: 19
                font.family: "WenQuanYi Micro Hei Mono"
                color: "black"
                text: control.currentText
            }


            // drop-down customization here
            property Component __dropDownStyle: MenuStyle {
                __maxPopupHeight: 240
                __menuItemType: "comboboxitem"

            padding.bottom : getPaddingLength(1)

                frame: Rectangle {              // background
                    color: "#fff"
                    border.width: 1
                }

                itemDelegate.label:             // an item text
                    Text {
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 19
                    font.family: "WenQuanYi Micro Hei Mono"
                    color: "black"
                    text: styleData.text
                }

                itemDelegate.background: Rectangle {  // selection of an item
                    color: styleData.selected ? "#5692c4" : "transparent"
                }

                __scrollerStyle: ScrollViewStyle { }
            }
        }

@

Any help is greatly appreciated.

--Narayanan K