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. Button sizes in layout
Forum Updated to NodeBB v4.3 + New Features

Button sizes in layout

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 3 Posters 4.2k 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.
  • G Offline
    G Offline
    GrahamLa
    wrote on 29 Jan 2019, 13:56 last edited by
    #1

    Hi
    I have a row layout containing a set of buttons.
    I would like these buttons to be of equal size but cant see a way of doing this.
    Does anyone know how I can do this?

    Code

    Rectangle {
        color: "transparent"
    
        RowLayout {
    
            Label {
                id: label
                text: qsTr("Status")
                font.pointSize: 12
            }
    
    
            RoundButton {
                id: roundButton2
                text: "Engage"
                Layout.fillWidth: true
                font.pointSize: 12
                width: 80
            }
    
            RoundButton {
                id: roundButton
                text: "Disengage"
                Layout.fillWidth: true
                font.pointSize: 12
                width: 80
            }
    
            RoundButton {
                id: roundButton1
                text: "Reset"
                Layout.fillWidth: true
                font.pointSize: 12
                width: 80
            }
        }
    
        width: childrenRect.width
        height: childrenRect.height
    }
    
    
    O 1 Reply Last reply 29 Jan 2019, 14:16
    0
    • G GrahamLa
      29 Jan 2019, 13:56

      Hi
      I have a row layout containing a set of buttons.
      I would like these buttons to be of equal size but cant see a way of doing this.
      Does anyone know how I can do this?

      Code

      Rectangle {
          color: "transparent"
      
          RowLayout {
      
              Label {
                  id: label
                  text: qsTr("Status")
                  font.pointSize: 12
              }
      
      
              RoundButton {
                  id: roundButton2
                  text: "Engage"
                  Layout.fillWidth: true
                  font.pointSize: 12
                  width: 80
              }
      
              RoundButton {
                  id: roundButton
                  text: "Disengage"
                  Layout.fillWidth: true
                  font.pointSize: 12
                  width: 80
              }
      
              RoundButton {
                  id: roundButton1
                  text: "Reset"
                  Layout.fillWidth: true
                  font.pointSize: 12
                  width: 80
              }
          }
      
          width: childrenRect.width
          height: childrenRect.height
      }
      
      
      O Offline
      O Offline
      ODБOï
      wrote on 29 Jan 2019, 14:16 last edited by ODБOï
      #2

      hi,
      @GrahamLa said in Button sizes in layout:

      I would like these buttons to be of equal size but cant see a way of doing this

      that should be the default behavior when you use Qt Quick Layouts

      dont assign width and height directly to the buttons, use Layout.height, Layout.width like in the example.

      edit: tought it was custom type made by you
      What is RoundButton.qml content ?

      1 Reply Last reply
      0
      • G Offline
        G Offline
        GrahamLa
        wrote on 29 Jan 2019, 15:08 last edited by
        #3

        Hi
        Thanks for your answer, that was how I was expecting it to work
        But my buttons are still not the same size
        Updated code

        Rectangle {
            color: "transparent"
        
            RowLayout {
                id: rowLayout
                spacing: 10
        
                Label {
                    id: label
                    text: qsTr("Label")
                    Layout.fillWidth: true
                }
        
                RoundButton {
                    text: "Engage"
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
                RoundButton {
                    text: "Disengage"
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
                RoundButton {
                    text: "Reset"
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
        
            }
        
        }
        

        Output
        0_1548772557571_06df11b6-39e8-4e6e-a6cd-39fe862db3ca-image.png

        O J 2 Replies Last reply 30 Jan 2019, 13:52
        0
        • G GrahamLa
          29 Jan 2019, 15:08

          Hi
          Thanks for your answer, that was how I was expecting it to work
          But my buttons are still not the same size
          Updated code

          Rectangle {
              color: "transparent"
          
              RowLayout {
                  id: rowLayout
                  spacing: 10
          
                  Label {
                      id: label
                      text: qsTr("Label")
                      Layout.fillWidth: true
                  }
          
                  RoundButton {
                      text: "Engage"
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                  }
                  RoundButton {
                      text: "Disengage"
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                  }
                  RoundButton {
                      text: "Reset"
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                  }
          
              }
          
          }
          

          Output
          0_1548772557571_06df11b6-39e8-4e6e-a6cd-39fe862db3ca-image.png

          O Offline
          O Offline
          ODБOï
          wrote on 30 Jan 2019, 13:52 last edited by
          #4

          @GrahamLa hi,
          can you show an image of what you need ?

          see this properties also:
          minimumWidth/minimumHeight/preferredWidth/preferredHeight/maximumWidth/maximumHeight

          1 Reply Last reply
          0
          • G GrahamLa
            29 Jan 2019, 15:08

            Hi
            Thanks for your answer, that was how I was expecting it to work
            But my buttons are still not the same size
            Updated code

            Rectangle {
                color: "transparent"
            
                RowLayout {
                    id: rowLayout
                    spacing: 10
            
                    Label {
                        id: label
                        text: qsTr("Label")
                        Layout.fillWidth: true
                    }
            
                    RoundButton {
                        text: "Engage"
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }
                    RoundButton {
                        text: "Disengage"
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }
                    RoundButton {
                        text: "Reset"
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }
            
                }
            
            }
            

            Output
            0_1548772557571_06df11b6-39e8-4e6e-a6cd-39fe862db3ca-image.png

            J Offline
            J Offline
            J.Hilk
            Moderators
            wrote on 30 Jan 2019, 14:03 last edited by
            #5

            @GrahamLa
            I usually dont use Layout's in QML - I like to manage my anchors and sizes by hand, don't judge me ;-) - but seems like this properties

            Layout.fillWidth: true
            Layout.preferredWidth

            are what you're looking for.

            Set it the same for each button and make sure the choosen width is actually big enough to fit the largest (the one with the longest text) button.


            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            1 Reply Last reply
            0
            • G Offline
              G Offline
              GrahamLa
              wrote on 30 Jan 2019, 16:50 last edited by
              #6

              I solved this by using Rectangle instead of a layout
              Thanks for the replies

              1 Reply Last reply
              0

              1/6

              29 Jan 2019, 13:56

              • Login

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