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. border-radius not working for QProgressBar::chunk
QtWS25 Last Chance

border-radius not working for QProgressBar::chunk

Scheduled Pinned Locked Moved Unsolved General and Desktop
6 Posts 3 Posters 210 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.
  • S Offline
    S Offline
    sapvi
    wrote on last edited by
    #1

    Hello. My problem is that I can set border-radius for QProgressBar itself, but not for QProgressBar::chunk. When I set it for chunk, nothing seems to change.

    This is my style:

    QProgressBar { 
            border: 2px solid rgb(100, 100, 100); 
            margin: 0px; 
            padding: 0px; 
            text-align: center;
            border-radius: 10px;
            height: 25px;
        }
        QProgressBar::chunk {
            background: qlineargradient(
                x1: 0, y1: 0, x2: 1, y2: 0,
                stop: 0 rgb(144, 238, 144),
                stop: 1 rgb(0, 255, 0)
            );
            border-radius: 15px;
        }
    

    So, the inside of the progress bar is rectangular while progress bar border is rounded which does not look well.

    self.progress_bar = QProgressBar()
    self.progress_bar.setStyleSheet(progress_bar_style)
    

    I have seen similar questions here but:

    1. One proposed to set margin but it does not look good in my case either. Then I just have weird white spaces on the left and ride side of the progress bar.
    2. Another one was actually working with the border-radius, so I am not sure why I do not have it working.

    Is it possible some either stylesheet is blocking just the radius? The rest of style, i.e. the gradient, seems properly applied.

    Or what are my other options? I have also seen some vague answers about subclassing the QProgressBar and making some changing to the drawing function, but I am afraid I am not at that Qt level yet.

    SGaistS 1 Reply Last reply
    0
    • S sapvi

      Hello. My problem is that I can set border-radius for QProgressBar itself, but not for QProgressBar::chunk. When I set it for chunk, nothing seems to change.

      This is my style:

      QProgressBar { 
              border: 2px solid rgb(100, 100, 100); 
              margin: 0px; 
              padding: 0px; 
              text-align: center;
              border-radius: 10px;
              height: 25px;
          }
          QProgressBar::chunk {
              background: qlineargradient(
                  x1: 0, y1: 0, x2: 1, y2: 0,
                  stop: 0 rgb(144, 238, 144),
                  stop: 1 rgb(0, 255, 0)
              );
              border-radius: 15px;
          }
      

      So, the inside of the progress bar is rectangular while progress bar border is rounded which does not look well.

      self.progress_bar = QProgressBar()
      self.progress_bar.setStyleSheet(progress_bar_style)
      

      I have seen similar questions here but:

      1. One proposed to set margin but it does not look good in my case either. Then I just have weird white spaces on the left and ride side of the progress bar.
      2. Another one was actually working with the border-radius, so I am not sure why I do not have it working.

      Is it possible some either stylesheet is blocking just the radius? The rest of style, i.e. the gradient, seems properly applied.

      Or what are my other options? I have also seen some vague answers about subclassing the QProgressBar and making some changing to the drawing function, but I am afraid I am not at that Qt level yet.

      SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi,

      @sapvi said in border-radius not working for QProgressBar::chunk:

      1. Another one was actually working with the border-radius, so I am not sure why I do not have it working.

      What was done in that stylesheet since it was working ?

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      S 1 Reply Last reply
      0
      • B Offline
        B Offline
        Bonnie
        wrote on last edited by Bonnie
        #3

        I guess the problem is that border-radius won't work when the width/height is less than the radius value. The one working probably has relatively small radius.
        Here's a similar post using QSlider with some suggestions: https://forum.qt.io/topic/160415/use-qss-to-custom-qslider

        S 1 Reply Last reply
        1
        • SGaistS SGaist

          Hi,

          @sapvi said in border-radius not working for QProgressBar::chunk:

          1. Another one was actually working with the border-radius, so I am not sure why I do not have it working.

          What was done in that stylesheet since it was working ?

          S Offline
          S Offline
          sapvi
          wrote on last edited by
          #4

          @SGaist said in border-radius not working for QProgressBar::chunk:

          What was done in that stylesheet since it was working ?

          The answers just suggested using border-radius: 15px; and were marked accepted by OP without further screenshots of how it worked. So not sure what is the difference against my case.

          1 Reply Last reply
          0
          • B Bonnie

            I guess the problem is that border-radius won't work when the width/height is less than the radius value. The one working probably has relatively small radius.
            Here's a similar post using QSlider with some suggestions: https://forum.qt.io/topic/160415/use-qss-to-custom-qslider

            S Offline
            S Offline
            sapvi
            wrote on last edited by
            #5

            @Bonnie hm, I feel a bit crazy but now it even seems it works differently in different runs.

            1. Run one with border-radius 15px.
              v1.png
            2. Run two with border-radius 15px.
              v2.png
            3. Next run with border-radius 10px actually first look like run 2 for ~0.5sec and then looks like on screenshot below.
              v3.png
            4. With border-radius 5px we are actually back to how it looked with 15px. But also only in the first run. In the second run it again looks like number 2.
              v4.png

            I am very confused what is happening. Reducing size further does not seem to fix the issue.

            B 1 Reply Last reply
            0
            • S sapvi

              @Bonnie hm, I feel a bit crazy but now it even seems it works differently in different runs.

              1. Run one with border-radius 15px.
                v1.png
              2. Run two with border-radius 15px.
                v2.png
              3. Next run with border-radius 10px actually first look like run 2 for ~0.5sec and then looks like on screenshot below.
                v3.png
              4. With border-radius 5px we are actually back to how it looked with 15px. But also only in the first run. In the second run it again looks like number 2.
                v4.png

              I am very confused what is happening. Reducing size further does not seem to fix the issue.

              B Offline
              B Offline
              Bonnie
              wrote on last edited by Bonnie
              #6

              @sapvi Your chunk has 26px height, so the max radius value should be 13px. 15px surely won't work.
              As I can see 10px and 5px radius in number 3 and 4 all work with rounded corner.
              The white corner of the background is another issue I think. (I don't know, is there any other style setting affecting it?)
              When they look like number 2 again (that means no rounded corner right?) , has the progress value changed? Any chance the width of the chunk becomes too small? Or maybe the height also changes due to some layout changing?
              Another thing to mention is that this line "height: 25px;" in stylesheet has no effect.

              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