Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML combobox styling issue in QtQuick.Controls 2.2
QtWS25 Last Chance

QML combobox styling issue in QtQuick.Controls 2.2

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qmlqtquickcontrolcombobox stylecomboboxqtquick2
4 Posts 3 Posters 3.3k Views
  • 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 Offline
    P Offline
    pra7
    wrote on 21 Jul 2017, 04:57 last edited by pra7
    #1

    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 22 Jul 2017, 15:19
    0
    • P pra7
      21 Jul 2017, 04:57

      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 Offline
      E Offline
      Eeli K
      wrote on 22 Jul 2017, 15:19 last edited by
      #2

      @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 25 Jul 2017, 16:37
      0
      • E Eeli K
        22 Jul 2017, 15:19

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

        P Offline
        P Offline
        pra7
        wrote on 25 Jul 2017, 16:37 last edited by
        #3

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

        L 1 Reply Last reply 17 Jan 2018, 10:43
        0
        • P pra7
          25 Jul 2017, 16:37

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

          L Offline
          L Offline
          lpons
          wrote on 17 Jan 2018, 10:43 last edited by
          #4

          @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
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved