Qt Forum

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

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    Unsolved Minimize Groupbox

    QML and Qt Quick
    4
    4
    3799
    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.
    • H
      HTWAMD last edited by

      Hey,

      is there a way to minimize a groupbox and hide all the content inside? To show the content I want something like a drop-down button.

      Julien B 1 Reply Last reply Reply Quote 0
      • p3c0
        p3c0 Moderators last edited by

        @HTWAMD There is visible property if thats what you are trying to do.

        157

        1 Reply Last reply Reply Quote 1
        • mrjj
          mrjj Lifetime Qt Champion last edited by

          well, if you have it in a layout
          You can set minimumHeight to adjust its size and show/hide its widgets but it will not work
          much like a dropdown button.

          More like area you collapse / expand

          1 Reply Last reply Reply Quote 0
          • Julien B
            Julien B @HTWAMD last edited by Julien B

            Hello @HTWAMD,

            Maybe Expander Control in QML is that you are looking for?

            In the example below you can click on the black rectangle to collapse/expand the group box

            Rectangle {
                id: rect1
                width: groupBox.width; height: groupBox.height
                y: 64
                x: 64
                color: "grey"
                anchors.top: rect2.bottom
                anchors.left: rect2.left
                clip: true
                GroupBox {
                    id: groupBox
                    //title: qsTr("Synchronize")
                    ColumnLayout {
                        anchors.fill: parent
                        CheckBox { text: qsTr("E-mail") }
                        CheckBox { text: qsTr("Calendar") }
                        CheckBox { text: qsTr("Contacts") }
                    }
                }
            
                Behavior on height { NumberAnimation { duration: 250 } }
            }
            Rectangle {
                id: rect2
                width: groupBox.width; height: 64
                y: 64
                x: 64
                color: "black"
                Text{
                    color: "white"
                    text: "synchronize"
                    anchors.centerIn: parent
                }
            
            
                MouseArea {
                    anchors.fill: parent
                    onClicked:
                        if (rect1.height === 0)
                            rect1.height = groupBox.height
                        else
                            rect1.height = 0
                }
            }
            
            1 Reply Last reply Reply Quote 0
            • First post
              Last post