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

Customization of push button

Scheduled Pinned Locked Moved Solved General and Desktop
28 Posts 5 Posters 13.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.
  • J.HilkJ J.Hilk

    @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 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.HilkJ 1 Reply Last reply
    0
    • FlotisableF Flotisable

      @David406
      maybe QToolButton is another choice?

      D Offline
      D Offline
      David406
      wrote on last edited by
      #6

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

      FlotisableF 1 Reply Last reply
      0
      • D David406

        @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.HilkJ Offline
        J.HilkJ Offline
        J.Hilk
        Moderators
        wrote on 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

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

          FlotisableF Offline
          FlotisableF Offline
          Flotisable
          wrote on 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
          • Venkatesh VV Offline
            Venkatesh VV Offline
            Venkatesh V
            wrote on 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 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.HilkJ M 2 Replies Last reply
              0
              • D David406

                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.HilkJ Offline
                J.HilkJ Offline
                J.Hilk
                Moderators
                wrote on 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
                0
                • D David406

                  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 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
                  0
                  • M mostefa

                    @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 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
                    0
                    • D David406

                      @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 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
                      0
                      • J.HilkJ J.Hilk

                        @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 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
                        0
                        • M mostefa

                          @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 last edited by
                          #16

                          @mostefa
                          Unfortunately,

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

                          doesn't help.

                          1 Reply Last reply
                          0
                          • D David406

                            @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 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
                            3
                            • M mostefa

                              @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 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.HilkJ M 2 Replies Last reply
                              0
                              • D David406

                                @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.HilkJ Offline
                                J.HilkJ Offline
                                J.Hilk
                                Moderators
                                wrote on 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
                                1
                                • D David406

                                  @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 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.HilkJ J.Hilk

                                    @David406

                                    QPushButton{border: none;}
                                    
                                    M Offline
                                    M Offline
                                    mostefa
                                    wrote on 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.HilkJ 2 Replies Last reply
                                    0
                                    • M mostefa

                                      @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 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

                                        @J.Hilk said in Customization of push button:

                                        @David406

                                        QPushButton{border: none;}
                                        

                                        AFAIK border: none; will not change anything

                                        J.HilkJ Offline
                                        J.HilkJ Offline
                                        J.Hilk
                                        Moderators
                                        wrote on 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
                                        1
                                        • J.HilkJ J.Hilk

                                          @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 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

                                          • Login

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