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. [Solved] ComboBox styling useless?
Forum Updated to NodeBB v4.3 + New Features

[Solved] ComboBox styling useless?

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 2.1k Views 1 Watching
  • 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.
  • H Offline
    H Offline
    Hykkel
    wrote on last edited by
    #1

    Hi.

    I'm trying to style a "ComboBox":http://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-combobox.html (Windows 8 look and feel) but having trouble doing so. I cannot find anything in the "docs":http://qt-project.org/doc/qt-5.1/qtquickcontrolsstyles/qml-qtquick-controls-styles1-comboboxstyle.html. The below code only styles the "Button area" and not the drop down list, leaving me with a nice looking ComboBox that should not be clicked (Just like when you get a chocolate from a box and it turns out the inside is just horrible! )

    I surely hope that this is fixable... I cannot ship with ComboBox's looking like that!

    Code:
    @import QtQuick 2.1
    import QtQuick.Controls 1.0
    import QtQuick.Controls.Styles 1.0
    ...
    ComboBox {
    width: 200
    model: [ "Banana", "Apple", "Coconut" ]

            style: ComboBoxStyle {
                background: Rectangle {
                    height: 100
                    width: control.width
                    color: "white"
                    border.color: "lightgray"
                    border.width: 1
    
                    Image{
                        source: "../Images/wl_arrow.png"
                        fillMode: Image.PreserveAspectFit
                        verticalAlignment: Image.AlignVCenter
    
                        anchors{
                            top: parent.top
                            bottom: parent.bottom
                            right: parent.right
                            rightMargin: 5
                        }
                    }
    
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.color = "lightblue"
                        onExited: parent.color = "white"
                    }
                }
                label:Text {
                    font.family: "Segoe UI"
                    font.pointSize: 10
                    text: control.currentText
                }
            }
        }@
    
    1 Reply Last reply
    0
    • N Offline
      N Offline
      Nosf
      wrote on last edited by
      #2

      You can style the dropdown with some hidden delegates as suggested by @Jens in another thread.

      To see an example of using those "hidden" delegates, check "this reply":http://qt-project.org/forums/viewthread/33188/#149560

      1 Reply Last reply
      0
      • H Offline
        H Offline
        Hykkel
        wrote on last edited by
        #3

        Thanks a lot!

        There should be a reference to this post in the documentation!

        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