Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    QML DropDown Border Issue (Qt-5.3.2)

    QML and Qt Quick
    1
    1
    391
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E
      econsysqtdev last edited by 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

      1 Reply Last reply Reply Quote 0
      • First post
        Last post