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. Customization of push button
QtWS25 Last Chance

Customization of push button

Scheduled Pinned Locked Moved Solved General and Desktop
28 Posts 5 Posters 13.1k 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.
  • J J.Hilk
    27 Mar 2017, 11:45

    @David406

    Hi,

    the better way to solve this issue:
    First, using A QLayout that way you dont have to move your buttons individually and they adjust to changes in size automaticaly.

    Second, set the Picture via a StyleSheet like @mostefa suggested: setStyleSheet("QPushButton{border-image:url(pathToImg/img.png)}");

    You have the space between the buttons because, the Icon is not the whole PushButton

    To have the buttons, when inside a Layout, right next to each other, remember to set the spacing to 0.

    D Offline
    D Offline
    David406
    wrote on 27 Mar 2017, 12:27 last edited by
    #5

    @J.Hilk
    Thanks a lot. Your suggestions are very helpful. But I also would like to move the layout widget to a give position. However, QHBoxLayout widget do not have this method. Do you have any suggestions?

    J 1 Reply Last reply 27 Mar 2017, 12:47
    0
    • F Flotisable
      27 Mar 2017, 12:21

      @David406
      maybe QToolButton is another choice?

      D Offline
      D Offline
      David406
      wrote on 27 Mar 2017, 12:37 last edited by
      #6

      @Flotisable
      Do you mean QToolBar? This seems to be a good choice.

      F 1 Reply Last reply 27 Mar 2017, 15:14
      0
      • D David406
        27 Mar 2017, 12:27

        @J.Hilk
        Thanks a lot. Your suggestions are very helpful. But I also would like to move the layout widget to a give position. However, QHBoxLayout widget do not have this method. Do you have any suggestions?

        J Offline
        J Offline
        J.Hilk
        Moderators
        wrote on 27 Mar 2017, 12:47 last edited by
        #7

        @David406 generally, I would suggest to place your whole UI into an interlocking construct of QLayouts.

        But if you dont want to do that,
        You can use a QFrame or QWidet as a parent for the QLayout and move that around.


        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
        • D David406
          27 Mar 2017, 12:37

          @Flotisable
          Do you mean QToolBar? This seems to be a good choice.

          F Offline
          F Offline
          Flotisable
          wrote on 27 Mar 2017, 15:14 last edited by
          #8

          @David406
          no, QToolButton is a special button that is usually used in QToolBar

          you can read the document of QToolButton and QToolBar

          1 Reply Last reply
          0
          • V Offline
            V Offline
            Venkatesh V
            wrote on 27 Mar 2017, 15:45 last edited by
            #9

            @David406
            set it for all your button,
            button->setFlat(true);
            it solves your problem.

            1 Reply Last reply
            1
            • D Offline
              D Offline
              David406
              wrote on 28 Mar 2017, 11:05 last edited by David406
              #10

              Hi all, thanks for all of your help! I tried to set my buttons flat with
              button->setFlat(true);
              and it looks good. But there is still a problem remained, that is, I can't set
              the background color the these button. I was using stylesheet

              drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
              

              See below:

              alt text

              The background color only come into effect when I click on the button:

              alt text

              Any suggestions?

              J M 2 Replies Last reply 28 Mar 2017, 11:10
              0
              • D David406
                28 Mar 2017, 11:05

                Hi all, thanks for all of your help! I tried to set my buttons flat with
                button->setFlat(true);
                and it looks good. But there is still a problem remained, that is, I can't set
                the background color the these button. I was using stylesheet

                drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                

                See below:

                alt text

                The background color only come into effect when I click on the button:

                alt text

                Any suggestions?

                J Offline
                J Offline
                J.Hilk
                Moderators
                wrote on 28 Mar 2017, 11:10 last edited by
                #11

                @David406

                are you sure the stylesheet is applied at all? And is this the only place where you set a stylesheet;

                theres a t least a ; missing, what usually results in a stylesheet parsing error.

                drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255);}");
                

                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.

                D 1 Reply Last reply 28 Mar 2017, 11:39
                0
                • D David406
                  28 Mar 2017, 11:05

                  Hi all, thanks for all of your help! I tried to set my buttons flat with
                  button->setFlat(true);
                  and it looks good. But there is still a problem remained, that is, I can't set
                  the background color the these button. I was using stylesheet

                  drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                  

                  See below:

                  alt text

                  The background color only come into effect when I click on the button:

                  alt text

                  Any suggestions?

                  M Offline
                  M Offline
                  mostefa
                  wrote on 28 Mar 2017, 11:10 last edited by mostefa
                  #12

                  @David406 said in Customization of push button:

                  Hi all, thanks for all of your help! I tried to set my buttons flat with
                  button->setFlat(true);
                  and it looks good. But there is still a problem remained, that is, I can't set
                  the background color the these button. I was using stylesheet

                  drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                  

                  See below:

                  alt text

                  The background color only come into effect when I click on the button:

                  alt text

                  Any suggestions?

                  Is your QPushButton checkable??

                  If yes you need to add stylesheet when button is checked

                  I think that this should be something like this:

                  QPushButton:checked{background-color: white;};
                  
                  D 1 Reply Last reply 28 Mar 2017, 11:31
                  0
                  • M mostefa
                    28 Mar 2017, 11:10

                    @David406 said in Customization of push button:

                    Hi all, thanks for all of your help! I tried to set my buttons flat with
                    button->setFlat(true);
                    and it looks good. But there is still a problem remained, that is, I can't set
                    the background color the these button. I was using stylesheet

                    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                    

                    See below:

                    alt text

                    The background color only come into effect when I click on the button:

                    alt text

                    Any suggestions?

                    Is your QPushButton checkable??

                    If yes you need to add stylesheet when button is checked

                    I think that this should be something like this:

                    QPushButton:checked{background-color: white;};
                    
                    D Offline
                    D Offline
                    David406
                    wrote on 28 Mar 2017, 11:31 last edited by David406
                    #13

                    @mostefa
                    Thanks.
                    Yes, my button is checkable.
                    I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                    

                    only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means (first picture).

                    M 1 Reply Last reply 28 Mar 2017, 11:33
                    0
                    • D David406
                      28 Mar 2017, 11:31

                      @mostefa
                      Thanks.
                      Yes, my button is checkable.
                      I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                      drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                      

                      only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means (first picture).

                      M Offline
                      M Offline
                      mostefa
                      wrote on 28 Mar 2017, 11:33 last edited by
                      #14

                      @David406 said in Customization of push button:

                      @mostefa
                      Thanks.
                      Yes, my button is checkable.
                      I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                      drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                      

                      only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means.

                      Ok

                      Then what about unchecked property?

                      QPushButton:unchecked{background-color: white;};
                      
                      D 1 Reply Last reply 28 Mar 2017, 11:44
                      0
                      • J J.Hilk
                        28 Mar 2017, 11:10

                        @David406

                        are you sure the stylesheet is applied at all? And is this the only place where you set a stylesheet;

                        theres a t least a ; missing, what usually results in a stylesheet parsing error.

                        drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255);}");
                        
                        D Offline
                        D Offline
                        David406
                        wrote on 28 Mar 2017, 11:39 last edited by David406
                        #15

                        @J.Hilk
                        Thanks.
                        Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                        alt text

                        M 1 Reply Last reply 28 Mar 2017, 11:45
                        0
                        • M mostefa
                          28 Mar 2017, 11:33

                          @David406 said in Customization of push button:

                          @mostefa
                          Thanks.
                          Yes, my button is checkable.
                          I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                          drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                          

                          only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means.

                          Ok

                          Then what about unchecked property?

                          QPushButton:unchecked{background-color: white;};
                          
                          D Offline
                          D Offline
                          David406
                          wrote on 28 Mar 2017, 11:44 last edited by
                          #16

                          @mostefa
                          Unfortunately,

                          QPushButton:unchecked{background-color: white;};
                          

                          doesn't help.

                          1 Reply Last reply
                          0
                          • D David406
                            28 Mar 2017, 11:39

                            @J.Hilk
                            Thanks.
                            Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                            alt text

                            M Offline
                            M Offline
                            mostefa
                            wrote on 28 Mar 2017, 11:45 last edited by mostefa
                            #17

                            @David406 said in Customization of push button:

                            @J.Hilk
                            Thanks.
                            Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                            alt text

                            Hi again @David406

                            i am not sure that setFlat(true) is really what do you want,

                            http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

                            The doc actually says:

                            If this property is set, most styles will not paint the button background unless the button is being pressed.
                            

                            And i think that this is your problem,

                            So i suggest you to delete the line pushbutton->setFlat(true)

                            And setStylesheet of your PushButton as follow

                            QPushButton
                            {
                            border-style: outset;
                            background-color: red ;/** for example **/
                            }
                            

                            Keep me informed if this is what you want or no?

                            Best regards !

                            D 1 Reply Last reply 28 Mar 2017, 11:59
                            3
                            • M mostefa
                              28 Mar 2017, 11:45

                              @David406 said in Customization of push button:

                              @J.Hilk
                              Thanks.
                              Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                              alt text

                              Hi again @David406

                              i am not sure that setFlat(true) is really what do you want,

                              http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

                              The doc actually says:

                              If this property is set, most styles will not paint the button background unless the button is being pressed.
                              

                              And i think that this is your problem,

                              So i suggest you to delete the line pushbutton->setFlat(true)

                              And setStylesheet of your PushButton as follow

                              QPushButton
                              {
                              border-style: outset;
                              background-color: red ;/** for example **/
                              }
                              

                              Keep me informed if this is what you want or no?

                              Best regards !

                              D Offline
                              D Offline
                              David406
                              wrote on 28 Mar 2017, 11:59 last edited by David406
                              #18

                              @mostefa
                              Thanks again.
                              Yes, this helped. But there are separators between the buttons which I don't want, see below:

                              alt text

                              this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

                              J M 2 Replies Last reply 28 Mar 2017, 12:09
                              0
                              • D David406
                                28 Mar 2017, 11:59

                                @mostefa
                                Thanks again.
                                Yes, this helped. But there are separators between the buttons which I don't want, see below:

                                alt text

                                this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

                                J Offline
                                J Offline
                                J.Hilk
                                Moderators
                                wrote on 28 Mar 2017, 12:09 last edited by
                                #19

                                @David406

                                QPushButton{border: none;}
                                

                                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.

                                M 1 Reply Last reply 28 Mar 2017, 12:20
                                1
                                • D David406
                                  28 Mar 2017, 11:59

                                  @mostefa
                                  Thanks again.
                                  Yes, this helped. But there are separators between the buttons which I don't want, see below:

                                  alt text

                                  this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

                                  M Offline
                                  M Offline
                                  mostefa
                                  wrote on 28 Mar 2017, 12:16 last edited by mostefa
                                  #20

                                  @David406 said in Customization of push button:

                                  this is also the reason I used setflat(true)

                                  Any suggestion to eliminate those separators?

                                  How are you adding your buttons?

                                  With yourPushButton->move(x + width - 8 * 32, y + height);
                                  why -8*32 ,cause of spacing is maybe here, why just -8 * 32 ?

                                  1 Reply Last reply
                                  0
                                  • J J.Hilk
                                    28 Mar 2017, 12:09

                                    @David406

                                    QPushButton{border: none;}
                                    
                                    M Offline
                                    M Offline
                                    mostefa
                                    wrote on 28 Mar 2017, 12:20 last edited by
                                    #21

                                    @J.Hilk said in Customization of push button:

                                    @David406

                                    QPushButton{border: none;}
                                    

                                    AFAIK border: none; will not change anything

                                    D J 2 Replies Last reply 28 Mar 2017, 12:22
                                    0
                                    • M mostefa
                                      28 Mar 2017, 12:20

                                      @J.Hilk said in Customization of push button:

                                      @David406

                                      QPushButton{border: none;}
                                      

                                      AFAIK border: none; will not change anything

                                      D Offline
                                      D Offline
                                      David406
                                      wrote on 28 Mar 2017, 12:22 last edited by David406
                                      #22

                                      @mostefa
                                      Yes, border: none; is the default setting.
                                      And I want to be able to move those buttons around, so I did not use layout to add these buttons.

                                      1 Reply Last reply
                                      0
                                      • M mostefa
                                        28 Mar 2017, 12:20

                                        @J.Hilk said in Customization of push button:

                                        @David406

                                        QPushButton{border: none;}
                                        

                                        AFAIK border: none; will not change anything

                                        J Offline
                                        J Offline
                                        J.Hilk
                                        Moderators
                                        wrote on 28 Mar 2017, 12:23 last edited by
                                        #23

                                        @mostefa

                                        Just checked it, it does exactly what the OP want to, it removes the border/bulge of the default QPushButton


                                        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.

                                        D 1 Reply Last reply 28 Mar 2017, 12:29
                                        1
                                        • J J.Hilk
                                          28 Mar 2017, 12:23

                                          @mostefa

                                          Just checked it, it does exactly what the OP want to, it removes the border/bulge of the default QPushButton

                                          D Offline
                                          D Offline
                                          David406
                                          wrote on 28 Mar 2017, 12:29 last edited by
                                          #24

                                          @J.Hilk
                                          Yes, I checked it too. This really helped.
                                          border-style:none; is default, not border:none;
                                          Thank you all !!!

                                          1 Reply Last reply
                                          0

                                          14/28

                                          28 Mar 2017, 11:33

                                          • Login

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