Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Making QPushButtons span multiple columns in QGridLayout
Forum Updated to NodeBB v4.3 + New Features

Making QPushButtons span multiple columns in QGridLayout

Scheduled Pinned Locked Moved Solved General and Desktop
25 Posts 4 Posters 17.4k Views 2 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.
  • Q Offline
    Q Offline
    Qtstarter121
    wrote on 14 May 2018, 18:39 last edited by
    #6

    Yeah it doesn't work. One of my buttons ends up taking almost 2 columns and the other one disappears if I edit the ui file like this :

    <item row="8" column="0" colspan="1.5">   // button 1
    
    <item row="8" column="1" colspan="1.5">   // button 2
    
    
    G 1 Reply Last reply 14 May 2018, 18:52
    0
    • Q Qtstarter121
      14 May 2018, 18:39

      Yeah it doesn't work. One of my buttons ends up taking almost 2 columns and the other one disappears if I edit the ui file like this :

      <item row="8" column="0" colspan="1.5">   // button 1
      
      <item row="8" column="1" colspan="1.5">   // button 2
      
      
      G Offline
      G Offline
      Gojir4
      wrote on 14 May 2018, 18:52 last edited by
      #7

      @Qtstarter121 You cannot specify a column span of 1.5. It must be an integer. But you can achieve this by adding a column and then update column span of the other buttons.

      Another simple solution is to place and resize all your buttons as they should look in the final UI from the designer and then to select the parent (container of the buttons), and click on "Layout in a Grid" . It should make the job for you.

      Q 1 Reply Last reply 15 May 2018, 01:29
      1
      • C Offline
        C Offline
        Christian Ehrlicher
        Lifetime Qt Champion
        wrote on 14 May 2018, 18:53 last edited by
        #8

        You must not edit the ui file by hand. Just select a widget, click and hold on a handle on the side (not the edge) and move it to the adjacent cell.0_1526324017223_Screenshot_2.png

        Qt Online Installer direct download: https://download.qt.io/official_releases/online_installers/
        Visit the Qt Academy at https://academy.qt.io/catalog

        Q 1 Reply Last reply 15 May 2018, 01:33
        2
        • G Gojir4
          14 May 2018, 18:52

          @Qtstarter121 You cannot specify a column span of 1.5. It must be an integer. But you can achieve this by adding a column and then update column span of the other buttons.

          Another simple solution is to place and resize all your buttons as they should look in the final UI from the designer and then to select the parent (container of the buttons), and click on "Layout in a Grid" . It should make the job for you.

          Q Offline
          Q Offline
          Qtstarter121
          wrote on 15 May 2018, 01:29 last edited by Qtstarter121
          #9

          @Gojir4 So in terms of adding a column, the only way I see that working is when I add another button to one of the rows at the end, then it auto-creates a column for every row( you can't just add extra columns only to one row). So let's say I do that anyway, for the last row I suppose then I could specify in the ui file a column span of 2 per button like I did previously in the <item ... >, but the for the other rows which only contain 3 buttons, the column span now has to change to 4/3 which again doesn't work...

          With regards to solution number 2, I'm thinking this might be the only viable solution to get this working inside Qt Designer. I would need to break my current layout, resize my buttons manually the way I want and then re-arrange them in a grid again ( if I understood you correctly).

          Q G 2 Replies Last reply 15 May 2018, 01:45
          0
          • C Christian Ehrlicher
            14 May 2018, 18:53

            You must not edit the ui file by hand. Just select a widget, click and hold on a handle on the side (not the edge) and move it to the adjacent cell.0_1526324017223_Screenshot_2.png

            Q Offline
            Q Offline
            Qtstarter121
            wrote on 15 May 2018, 01:33 last edited by
            #10

            @Christian-Ehrlicher I'm assuming by the handle you mean those little purple squares. I did try holding that and moving to the adjacent cell, and all that happens is that the button simply moves to the adjacent cell which isn't what I want. I need to have two buttons in the last row occupy the space of three buttons in every other row, so somehow make the last row have only 2 columns or add a column somehow to the end of only the last row and make each button span 2 columns ( don't think I can do that).

            1 Reply Last reply
            0
            • Q Qtstarter121
              15 May 2018, 01:29

              @Gojir4 So in terms of adding a column, the only way I see that working is when I add another button to one of the rows at the end, then it auto-creates a column for every row( you can't just add extra columns only to one row). So let's say I do that anyway, for the last row I suppose then I could specify in the ui file a column span of 2 per button like I did previously in the <item ... >, but the for the other rows which only contain 3 buttons, the column span now has to change to 4/3 which again doesn't work...

              With regards to solution number 2, I'm thinking this might be the only viable solution to get this working inside Qt Designer. I would need to break my current layout, resize my buttons manually the way I want and then re-arrange them in a grid again ( if I understood you correctly).

              Q Offline
              Q Offline
              Qtstarter121
              wrote on 15 May 2018, 01:45 last edited by
              #11

              @Qtstarter121 hmm so I tried breaking my existing layout, and in my row with only 2 buttons I tried resizing those two buttons, selected everything and re-arranged in a grid layout but unfortunately it still forces a third column to be created in the last row.

              1 Reply Last reply
              0
              • M mrjj
                14 May 2018, 18:07

                Hi
                as mr @Christian-Ehrlicher says
                alt text

                Q Offline
                Q Offline
                Qtstarter121
                wrote on 15 May 2018, 02:18 last edited by
                #12

                @mrjj I wasn't able to see the animation before for some reason. I'm going to try this and get back to you.

                1 Reply Last reply
                0
                • Q Qtstarter121
                  15 May 2018, 01:29

                  @Gojir4 So in terms of adding a column, the only way I see that working is when I add another button to one of the rows at the end, then it auto-creates a column for every row( you can't just add extra columns only to one row). So let's say I do that anyway, for the last row I suppose then I could specify in the ui file a column span of 2 per button like I did previously in the <item ... >, but the for the other rows which only contain 3 buttons, the column span now has to change to 4/3 which again doesn't work...

                  With regards to solution number 2, I'm thinking this might be the only viable solution to get this working inside Qt Designer. I would need to break my current layout, resize my buttons manually the way I want and then re-arrange them in a grid again ( if I understood you correctly).

                  G Offline
                  G Offline
                  Gojir4
                  wrote on 15 May 2018, 07:16 last edited by
                  #13

                  @Qtstarter121 said in Making QPushButtons span multiple columns in QGridLayout:

                  @Gojir4 So in terms of adding a column, the only way I see that working is when I add another button to one of the rows at the end, then it auto-creates a column for every row( you can't just add extra columns only to one row). So let's say I do that anyway, for the last row I suppose then I could specify in the ui file a column span of 2 per button like I did previously in the <item ... >, but the for the other rows which only contain 3 buttons, the column span now has to change to 4/3 which again doesn't work...

                  Is that possible to show us some drawing of what you are trying to achieve ? It will help a lot
                  Is it something like that ? (sorry I cannot post image)

                  ┌----┬-----┬----┐
                  ├----┴--┬--┴----┤
                  ├----┬--┴--┬----┤
                  └----┴-----┴----┘
                  

                  @Qtstarter121 said in Making QPushButtons span multiple columns in QGridLayout:

                  With regards to solution number 2, I'm thinking this might be the only viable solution to get this working inside Qt Designer. I would need to break my current layout, resize my buttons manually the way I want and then re-arrange them in a grid again ( if I understood you correctly).

                  Yes that's what I meant. but it seems it didn't work according to your reply to yourself :)

                  Q 1 Reply Last reply 15 May 2018, 13:25
                  0
                  • G Gojir4
                    15 May 2018, 07:16

                    @Qtstarter121 said in Making QPushButtons span multiple columns in QGridLayout:

                    @Gojir4 So in terms of adding a column, the only way I see that working is when I add another button to one of the rows at the end, then it auto-creates a column for every row( you can't just add extra columns only to one row). So let's say I do that anyway, for the last row I suppose then I could specify in the ui file a column span of 2 per button like I did previously in the <item ... >, but the for the other rows which only contain 3 buttons, the column span now has to change to 4/3 which again doesn't work...

                    Is that possible to show us some drawing of what you are trying to achieve ? It will help a lot
                    Is it something like that ? (sorry I cannot post image)

                    ┌----┬-----┬----┐
                    ├----┴--┬--┴----┤
                    ├----┬--┴--┬----┤
                    └----┴-----┴----┘
                    

                    @Qtstarter121 said in Making QPushButtons span multiple columns in QGridLayout:

                    With regards to solution number 2, I'm thinking this might be the only viable solution to get this working inside Qt Designer. I would need to break my current layout, resize my buttons manually the way I want and then re-arrange them in a grid again ( if I understood you correctly).

                    Yes that's what I meant. but it seems it didn't work according to your reply to yourself :)

                    Q Offline
                    Q Offline
                    Qtstarter121
                    wrote on 15 May 2018, 13:25 last edited by
                    #14

                    @Gojir4 I want something like this:

                    0_1526390746422_Capture.PNG

                    M G 2 Replies Last reply 15 May 2018, 13:34
                    0
                    • Q Qtstarter121
                      15 May 2018, 13:25

                      @Gojir4 I want something like this:

                      0_1526390746422_Capture.PNG

                      M Offline
                      M Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on 15 May 2018, 13:34 last edited by
                      #15

                      @Qtstarter121
                      Hi
                      You can use one of the red layouts from Layout section to the left. ( not right click)
                      alt text

                      Q 1 Reply Last reply 15 May 2018, 15:12
                      2
                      • Q Qtstarter121
                        15 May 2018, 13:25

                        @Gojir4 I want something like this:

                        0_1526390746422_Capture.PNG

                        G Offline
                        G Offline
                        Gojir4
                        wrote on 15 May 2018, 13:45 last edited by Gojir4
                        #16

                        @Qtstarter121 What about that ? This is what I tried to explain in one of my previous post.

                        alt text

                        Sorry for quality of the gif, I'm not an expert in video conversion :)

                        M Q 2 Replies Last reply 15 May 2018, 13:55
                        2
                        • G Gojir4
                          15 May 2018, 13:45

                          @Qtstarter121 What about that ? This is what I tried to explain in one of my previous post.

                          alt text

                          Sorry for quality of the gif, I'm not an expert in video conversion :)

                          M Offline
                          M Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on 15 May 2018, 13:55 last edited by
                          #17

                          @Gojir4
                          Cool. I didn't know it would just allow it!
                          Ps. if u need gif anims, this just works
                          http://www.screentogif.com/

                          G 1 Reply Last reply 15 May 2018, 14:25
                          2
                          • M mrjj
                            15 May 2018, 13:55

                            @Gojir4
                            Cool. I didn't know it would just allow it!
                            Ps. if u need gif anims, this just works
                            http://www.screentogif.com/

                            G Offline
                            G Offline
                            Gojir4
                            wrote on 15 May 2018, 14:25 last edited by
                            #18

                            @mrjj Thanks for the tip.

                            1 Reply Last reply
                            0
                            • M mrjj
                              15 May 2018, 13:34

                              @Qtstarter121
                              Hi
                              You can use one of the red layouts from Layout section to the left. ( not right click)
                              alt text

                              Q Offline
                              Q Offline
                              Qtstarter121
                              wrote on 15 May 2018, 15:12 last edited by
                              #19

                              @mrjj I did that, instead of selecting all buttons and right click then layout in grid, I instead dragged a Grid Layout from the left panel and tried inputting buttons one by one into the layout, but once I finish the first row, the layout is fixed to define 3 columns, so I still can't only have 2 columns in the last row... there will always be that one column to the right that is empty.

                              0_1526397104546_Capture2.PNG

                              shaded region represents an empty cell that always exists no matter how I drag my buttons around.

                              M 1 Reply Last reply 15 May 2018, 15:47
                              0
                              • Q Qtstarter121
                                15 May 2018, 15:12

                                @mrjj I did that, instead of selecting all buttons and right click then layout in grid, I instead dragged a Grid Layout from the left panel and tried inputting buttons one by one into the layout, but once I finish the first row, the layout is fixed to define 3 columns, so I still can't only have 2 columns in the last row... there will always be that one column to the right that is empty.

                                0_1526397104546_Capture2.PNG

                                shaded region represents an empty cell that always exists no matter how I drag my buttons around.

                                M Offline
                                M Offline
                                mrjj
                                Lifetime Qt Champion
                                wrote on 15 May 2018, 15:47 last edited by mrjj
                                #20

                                @Qtstarter121
                                I i used both a GridLayout and a red layout i put as last row.
                                But it seems @Gojir4 made it do it without extra layout.
                                we just need him to tell what he clicks after selecting them all
                                as video is faster than my eye :)

                                G 1 Reply Last reply 15 May 2018, 19:35
                                1
                                • Q Offline
                                  Q Offline
                                  Qtstarter121
                                  wrote on 15 May 2018, 17:10 last edited by
                                  #21

                                  I'm confused as to what a "red layout" is. Isn't selecting a Grid Layout from the left panel, and selecting all buttons and right click-> Layout > Layout in Grid the same thing?

                                  1 Reply Last reply
                                  0
                                  • M mrjj
                                    15 May 2018, 15:47

                                    @Qtstarter121
                                    I i used both a GridLayout and a red layout i put as last row.
                                    But it seems @Gojir4 made it do it without extra layout.
                                    we just need him to tell what he clicks after selecting them all
                                    as video is faster than my eye :)

                                    G Offline
                                    G Offline
                                    Gojir4
                                    wrote on 15 May 2018, 19:35 last edited by
                                    #22

                                    @mrjj @Qtstarter121 I'm clicking on "Layout in a grid" :)
                                    alt text

                                    1 Reply Last reply
                                    1
                                    • G Gojir4
                                      15 May 2018, 13:45

                                      @Qtstarter121 What about that ? This is what I tried to explain in one of my previous post.

                                      alt text

                                      Sorry for quality of the gif, I'm not an expert in video conversion :)

                                      Q Offline
                                      Q Offline
                                      Qtstarter121
                                      wrote on 11 Jun 2018, 18:23 last edited by
                                      #23

                                      @Gojir4 I know this is a pretty late reply but I just wanted to say that this actually worked out for me. Thanks so much! The GIF animation was very helpful.

                                      G 1 Reply Last reply 12 Jun 2018, 09:14
                                      0
                                      • Q Qtstarter121
                                        11 Jun 2018, 18:23

                                        @Gojir4 I know this is a pretty late reply but I just wanted to say that this actually worked out for me. Thanks so much! The GIF animation was very helpful.

                                        G Offline
                                        G Offline
                                        Gojir4
                                        wrote on 12 Jun 2018, 09:14 last edited by
                                        #24

                                        @Qtstarter121 Glad it helped !
                                        Can you please set the thread as "Solved"
                                        Thanks

                                        1 Reply Last reply
                                        0
                                        • Q Offline
                                          Q Offline
                                          Qtstarter121
                                          wrote on 4 Oct 2019, 13:41 last edited by
                                          #25

                                          Sorry, I know it's like over a year later, but I have finally marked it as solved. Thanks for the help.

                                          1 Reply Last reply
                                          1

                                          • Login

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