How to remove the annoying extra bit of a tkinter.ttk scale

Question

There is this very annoying extra bit on ttk(tkinter.ttk) scale here is the image at the end there is an extra bit, which would annoy some people if they notice it(you would kinda be able to spot it). I had it print out what number the scale was and it was at the max it could be. Here is the code of the scale

width = Scale(optionsframe, from_ = 1, to = 20, style = 'SCALEBG.Horizontal.TScale')        
width.grid(row = 0, column = 7)

Here is an image without using style

The style code

scalebg = ttk.Style()
scalebg.configure('SCALEBG.Horizontal.TScale', foreground = '#2a2a2a', background = '#2a2a2a')

This occurs for both styles.

Edit From the comments it looks like it only happens when the vista and xpnative are used, which in my opinion give the best GUI look. Is there way to create your own style which would remove the extra bit and looks identical to the one tkinter provieds.

Where did you get `SCALEBG.Horizontal.TScale`? That's not part of the official tkinter package, is it? — Bryan Oakley, May 22 '22 at 16:04
It is a feature(as it is mentioned in the python docs) I think of tkinter.ttk to style the widgets such as giving it a background etc. I have kept the style code in the question again — Dodu, May 22 '22 at 16:28
The problem only occurs when using themes 'vista', 'xpnative' or not specifying any theme. — Derek, May 23 '22 at 03:01
which theme should i use to get this same theme as i really like this, and the code — Dodu, May 23 '22 at 03:11
Try any of the following ('winnative', 'clam', 'alt', 'default', 'classic') — Derek, May 23 '22 at 03:26
To me `vista` and `xpnative` are like the style i want to go to. `vista` is the default one. All the other styles make my application look old school. Is there a way I could block, make it not visible etc... that little extra — Dodu, May 23 '22 at 07:28

score 1 · Answer 1 · answered May 05 '23 at 15:56

I know this is an old post but might help someone in the future.

Disclaimer: My solution is a workaround that's a little clunky and not sexy, but it works. I tried to find a proper solution by even going into the Vista themes' .tcl file but apparently, the style of the widgets themselves is given through the Microsoft Visual Styles API. I tried playing around with it but it seems that fixing the issue in the themes' code could be deeper than my current understanding of the tcl language.

Workaround I found: Instead of setting the master of the Scale to be optionsframe , create another frame to contain the Scale and a variable to store the height of the frame (this will come in handy later):

scale_frame_height = 30

scale_frame = ttk.Frame(master=optionsframe, height=scale_frame_height)
scale_frame.grid(row=0, column=7)

Pack the scale into the container frame:

width = Scale(scale_frame, from_ = 1, to = 20, style = 'SCALEBG.Horizontal.TScale')
width.pack()

Now the "cheat" is to create another frame with the same height as the scale_frame and a width of 2 pixels and place it into the scale_frame container:

hide_pixel_frame = ttk.Frame(master=scale_frame, height=scale_frame_height, width=2)
hide_pixel_frame.place(relx=1, rely=0, anchor="ne")

The hide_pixel_frame will be laid over the excess pixels and always stick to the right:

Now create a style for the hide_pixel_frame to give it the same background color as the window and add the style to the frame:

hide_pixel_bg = ttk.Style()
hide_pixel_bg.configure('HIDE.TFrame', foreground = '#2a2a2a', background = '#2a2a2a')

hide_pixel_frame = ttk.Frame(master=scale_frame, height=scale_frame_height, width=2, style='HIDE.TFrame')
hide_pixel_frame.place(relx=1, rely=0, anchor="ne")

The final example code would look like this:

import tkinter as tk
from tkinter import ttk
from tkinter.ttk import Scale

root = tk.Tk()
style = ttk.Style(root)
style.theme_use("vista")
root.configure(bg='#2a2a2a')

scalebg = ttk.Style()
scalebg.configure('SCALEBG.Horizontal.TScale', foreground = '#2a2a2a', background = '#2a2a2a')

optionsframe = ttk.Frame(master=root, width=300, height=50)
optionsframe.pack_propagate()
optionsframe.pack(pady=30)

scale_frame_height = 30

scale_frame = ttk.Frame(master=optionsframe, height=scale_frame_height)
scale_frame.grid(row=0, column=7)

width = Scale(scale_frame, from_ = 1, to = 20, style = 'SCALEBG.Horizontal.TScale')
width.pack()

hide_pixel_bg = ttk.Style()
hide_pixel_bg.configure('HIDE.TFrame', foreground = '#2a2a2a', background = '#2a2a2a')

hide_pixel_frame = ttk.Frame(master=scale_frame, height=scale_frame_height, width=2, style='HIDE.TFrame')
hide_pixel_frame.place(relx=1, rely=0, anchor="ne")

root.mainloop()

The end result:

Again, this is quite a crude workaround but it's better than nothing and it gets rid of the pesky pixels.

This is a really nice solution, i can finally remove those extra pixels, thnx — Dodu, May 06 '23 at 08:33
Glad I could help @Dodu! Would appreciate it if you could upvote my answer or check it as the most appropriate answer so I can get more reputation and have more options to help on other posts :) — Robert Salamon, May 06 '23 at 16:31

How to remove the annoying extra bit of a tkinter.ttk scale

1 Answers1