QML DropDown Border Issue (Qt-5.3.2)



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.