1

I got to know about adding the text to the progress bar as per this question:

Displaying percentage in ttk progressbar

It helps me but I need a few more adjustments to do to the answer.

  1. I need the text (the percentage) to appear on the left side of the progressbar.

    For this, I added 'side':'left' to the layout format for Horizontal.TProgressbar.label.

As under:

style.layout('text.Horizontal.TProgressbar',
    [('Horizontal.Progressbar.trough',
    {'children': [('Horizontal.Progressbar.pbar',
    {'side': 'left', 'sticky': 'ns'})],
    'sticky': 'nswe'}),
    ('Horizontal.Progressbar.label', {'side':'left','sticky': ''})])

However, this moves the text to extreme left. It overlaps the progressbar border and is not clearly readable.

  1. I need to adjust the font and font color of this text. How do we change that?
Meet
  • 461
  • 4
  • 19

1 Answers1

2

  1. To change the space between the label and the border you can add a padding element to the layout

     style.layout('text.Horizontal.TProgressbar',
     [('Horizontal.Progressbar.trough',
       {'children': [('Horizontal.Progressbar.pbar',
                      {'side': 'left', 'sticky': 'ns'})],
        'sticky': 'nswe'}),
      ('Horizontal.Progressbar.padding', {'side':'left'}),
      ('Horizontal.Progressbar.label', {'side':'left','sticky': ''})])

    Then configure the padding with

    style.configure('text.Horizontal.TProgressbar', padding=4)

  2. You can change the font and color of the text using style.configure with the font and foreground options:

     style.configure('text.Horizontal.TProgressbar', foreground="red", font='Arial 20')

There is a full example of creating such a progressbar in my answer to Progressbar with Percentage Label?.

j_4321
  • 15,431
  • 3
  • 34
  • 61
  • This sticky west and side methods moves the text too much to the left almost on the border. Making it unreadable. Can we keep some distance from the border and where the text starts? Or only solution is to add space before the text? – Meet Dec 17 '21 at 07:29
  • @Meet I now realized that I was not answering the first part of the question properly. I have now found a way to add some padding and edited my answer. – j_4321 Dec 17 '21 at 09:28
  • Hey! Thanks this worked. Btw, how exactly are you creating that layout? I can't find any help or article on how to work with that syntax. – Meet Dec 17 '21 at 10:57
  • 1
    @Meet I don't remember really, I have learned the syntax for the layout from examples, mostly on SO and by trying things on my own. You can look at the layout of existing elements with `style.layout()` where `` is "TLabel", "TFrame", ... You can get a list of elements to use in layouts with `style.element_names()` and their options with `style.element_options()`. – j_4321 Dec 17 '21 at 16:34