border-radius not working for QProgressBar::chunk
-
Hello. My problem is that I can set border-radius for
QProgressBar
itself, but not forQProgressBar::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:
- 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.
- 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. -
Hello. My problem is that I can set border-radius for
QProgressBar
itself, but not forQProgressBar::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:
- 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.
- 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.Hi,
@sapvi said in border-radius not working for QProgressBar::chunk:
- 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 ?
-
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 -
Hi,
@sapvi said in border-radius not working for QProgressBar::chunk:
- 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 ?
@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. -
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@Bonnie hm, I feel a bit crazy but now it even seems it works differently in different runs.
- Run one with border-radius 15px.
- Run two with border-radius 15px.
- Next run with border-radius 10px actually first look like run 2 for ~0.5sec and then looks like on screenshot below.
- 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.
I am very confused what is happening. Reducing size further does not seem to fix the issue.
- Run one with border-radius 15px.
-
@Bonnie hm, I feel a bit crazy but now it even seems it works differently in different runs.
- Run one with border-radius 15px.
- Run two with border-radius 15px.
- Next run with border-radius 10px actually first look like run 2 for ~0.5sec and then looks like on screenshot below.
- 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.
I am very confused what is happening. Reducing size further does not seem to fix the issue.
@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. - Run one with border-radius 15px.