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

Customization of push button

Scheduled Pinned Locked Moved Solved General and Desktop
28 Posts 5 Posters 13.5k Views 3 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.
  • 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