Qt Forum

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

    Unsolved QML combobox styling issue in QtQuick.Controls 2.2

    QML and Qt Quick
    qml qtquickcontrol combobox style combobox qtquick2
    3
    4
    2659
    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.
    • P
      pra7 last edited by pra7

      I am a beginner and trying to use combobox to populate a list of elements, but when I tried to style there is some problem while displaying text, Below is the code:

      import QtQuick 2.7     
      import QtQuick.Controls 2.2
      
      Item {
          property string btntext : "First"
          signal dropDownIndexChanged(int index)
      
      id: mainDropDown
      ListModel{
          id: modelList
          ListElement{ text: "First" }
          ListElement{ text: "Second" }
          ListElement{ text: "Third" }
      }
      
      ComboBox {
          id: comboButton
          width: parent.width
          height: parent.height
          model:modelList
          currentIndex: 0
          editText : btntext
      
          Image {
              id: imageMainButton
              x: 119
              anchors.top: parent.verticalCenter
              anchors.right: parent.right
              anchors.rightMargin: 9
              anchors.topMargin: -7
              fillMode: Image.Tile
              sourceSize.height: 25
              sourceSize.width: 25
              source: "<some image>"
          }
          delegate: ItemDelegate {
              id:itemDelegate
              width: comboButton.width
      
              background:Rectangle{
                  gradient: Gradient {
                      GradientStop {
                          position: 0.0
                          color: itemDelegate.down ? "white" : "blue"
                      }
                      GradientStop {
                          position: 1.0
                          color: itemDelegate.down ? "yellow" : "orange"
                      }
                  }
              }
      
              contentItem: Text {
                  text: modelData
                  elide: Text.ElideRight
      
                  horizontalAlignment: Text.AlignLeft
                  verticalAlignment: Text.AlignVCenter
                  font.pointSize: 11
                  font.family: "Arial"
                  color:  itemDelegate.down ? "black" : "white"
              }
              highlighted: comboButton.highlightedIndex === index
      
          }
      
          indicator: Canvas {
          }
      
      //When this is added combo box text disapears or will be empty until something else is selected from the dropdown.
          contentItem: Text {
              text: comboButton.displayText             
              anchors.centerIn: parent
      
              //font: comboButton.font
              horizontalAlignment: Text.AlignLeft
              verticalAlignment: Text.AlignVCenter
              elide: Text.ElideRight
      
              renderType: Text.NativeRendering
              anchors.left : parent.left
              anchors.leftMargin: 10
              font.family: "Verdena"
              font.pointSize: 12
              font.bold: true
              color: "white"
          }
      
      
          background: Rectangle {
              implicitWidth: 120
              implicitHeight: 40
              radius: 2
      
              color : "white"
              //height:100
              smooth: true
              //border.width: 1
              border.color: "white"
      
      
          }
      
          popup: Popup {
              y: comboButton.height
              width: comboButton.width -5
              //implicitHeight: contentItem.implicitHeight -1
              padding: 1
      
              background: Rectangle {
                  border.color: "black"
                  radius: 2
                  color : "white"
              }
      
              contentItem: ListView {
                  //clip: true
                  implicitHeight: contentHeight
                  model: comboButton.popup.visible ? comboButton.delegateModel : null
                  currentIndex: comboButton.highlightedIndex
                  interactive: false
      
              }
          }
      
          onCurrentIndexChanged:
          {
              btntext = mainDropDown.get(currentIndex).text
              dropDownIndexChanged(currentIndex)
              console.log(btntext ,currentIndex)
          }
          }
      }
      
      1. As mentioned above why does combobox text is not displayed until I select an item from the drop down?

      2. The selected index/item is not highlighted at all.

      E 1 Reply Last reply Reply Quote 0
      • E
        Eeli K @pra7 last edited by

        @pra7 I can look into this if you make it a self-contained main.qml which opens a window when it's run.

        P 1 Reply Last reply Reply Quote 0
        • P
          pra7 @Eeli K last edited by

          @Eeli-K thanks for replying. I have almost solved the issue .and will post the answer soon.

          L 1 Reply Last reply Reply Quote 0
          • L
            lpons @pra7 last edited by

            @pra7 did you manage to solve it? I am facing the same issue. I cannot apply any stylesheet on a Combobox using QtQuick.Controls 2.2

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