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. QProgressBar alignment problem.

QProgressBar alignment problem.

Scheduled Pinned Locked Moved Unsolved General and Desktop
4 Posts 2 Posters 1.0k 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.
  • P Offline
    P Offline
    Piotrrr
    wrote on last edited by
    #1

    Hello.
    I have a problem with QProgressBar. I need it to have 3px border so I applied to it a style sheet:

    border: 3px solid white
    

    The effect of this:
    ba6af7e7-6cda-4822-9206-53e41d448e3d-image.png

    Can't figure out how to make the "content" of the progress bar not overlap it's border. I tried setting alignments but it's only applied to text inside the progressbar.
    Thanks.

    J.HilkJ 1 Reply Last reply
    0
    • P Piotrrr

      Hello.
      I have a problem with QProgressBar. I need it to have 3px border so I applied to it a style sheet:

      border: 3px solid white
      

      The effect of this:
      ba6af7e7-6cda-4822-9206-53e41d448e3d-image.png

      Can't figure out how to make the "content" of the progress bar not overlap it's border. I tried setting alignments but it's only applied to text inside the progressbar.
      Thanks.

      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      @Piotrrr works fine for me:
      7ee3a022-75a4-4a3a-9ca3-a158182ffc22-image.png

      Qt 5.15.2 macOS

      QProgressBar bar;
          bar.setOrientation(Qt::Vertical);
          bar.setRange(0,100);
          bar.setValue(30);
          bar.setStyleSheet("QProgressBar { background-color:black; border: 3px solid white; text-align: center; color:white;}"
                            "QProgressBar::chunk { background-color: #05B8CC;}");
      
          bar.resize(50,200);
          bar.show();
          app.exec();
      

      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
      3
      • P Offline
        P Offline
        Piotrrr
        wrote on last edited by
        #3

        Adding the "chunk" part fixes the problem, dunno why. Anyway, thanks for the help.

        1 Reply Last reply
        0
        • P Offline
          P Offline
          Piotrrr
          wrote on last edited by
          #4

          I have one more problem with styling my QProgressBar. I'm trying to round also the chunk within the bar so my whole stylesheet looks like this:

          QProgressBar bar;
              bar.setRange(0, 100);
              bar.setStyleSheet("QProgressBar { background-color:black; border: 2px solid white; text-align: center; color:white; border-radius: 13px; padding: 2px; font-size: 30px; margin: 10px;}"
                                "QProgressBar::chunk {border-bottom-left-radius: 10px; border-top-left-radius: 10px; background-color: qlineargradient(spread:pad, x1:0.486826, y1:1, x2:0.46195, y2:0, stop:0 rgba(0, 142, 254, 255), stop:1 rgba(63, 212, 255, 255));}");
              bar.resize(152, 95);
              bar.setValue(9);
              bar.show();
          

          But I noticed that if the chunk is shorter than the rounded part of the edge than the "roundness" isn't applied. So at first it has normal chunk with non-rounded corners, than if it exceeds a certain point, the stylesheet is applied and you see how it's changing when progressing which doesn't look nice. In my example if the value of the progress bar is less than 9 I got this:
          Screenshot from 2020-12-09 10-22-46.png
          And when the value is equal or more than 9 the stylesheet is applied and I have this:
          Screenshot from 2020-12-09 10-23-07.png
          Is there any workaround for this?

          Thanks.

          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