CODEWITHSUNDEEP
pythontkinter
TheSprinter
TheSprinter

Reputation: 358

Strange lines appear in the border of parent container when clicking on Entry element

I'm getting some strange lines in the border of the Canvas element every time I click on an Entry or ScrolledText widget. Once I click and the lines appear, they don't go away.

Here's what I mean. Don't mind the ugly look. This is just a simple implementation for minimum reproducible example.

When I haven't clicked on the Entry widget

enter image description here

After clicking on it

enter image description here

Here's the code for it.

import tkinter as tk
from tkinter import filedialog


def browse_files():
    browsed_files = filedialog.askopenfilenames()
    if browsed_files:
        print(browsed_files)


class App:

    def __init__(self):
        self.root = tk.Tk()
        self.root.configure(background='#929292')

        screen_w = self.root.winfo_screenwidth()
        screen_h = self.root.winfo_screenheight()
        win_x = int((screen_w / 2) - 600)
        win_y = int((screen_h / 2) - 400)

        self.root.geometry(f'1200x700+{win_x}+{win_y}')
        self.root.minsize(1200, 800)

        self.canvas = tk.Canvas(self.root, bg='white')
        self.canvas.grid(column=1, row=0, columnspan=7, rowspan=9, sticky='nsew')
        self.canvas.grid_columnconfigure(2, weight=1)
        self.canvas.grid_rowconfigure(2, weight=1)
        self.options_1_label = tk.Label(self.canvas, text='Tool 1 in Options 1', bg='white', padx=30)
        self.choose_dir_label = tk.Label(self.canvas, text='Choose file(s)', bg='white', padx=60)
        self.file_entry = tk.Entry(self.canvas, width=80, borderwidth=2)
        self.file_browse = tk.Button(self.canvas, text='Browse', height=1, width=15, command=browse_files)
        self.options_2_label = tk.Label(self.canvas, text='Tool 1 in Options 2', bg='white', padx=30)

        def options_1_click(event):

            self.options_2_label.grid_forget()
            self.options_1_label.grid(column=0, row=0, sticky='w', pady=(30, 0))
            self.choose_dir_label.grid(column=0, row=1, sticky='w', pady=(30, 0))
            self.file_entry.grid(column=0, columnspan=2, row=2, sticky='w', padx=(60, 0))
            self.file_browse.grid(column=2, row=2)

        def options_2_click(event):

            self.options_1_label.grid_forget()
            self.options_2_label.grid(column=0, row=0, sticky='w', pady=(30, 0))
            self.choose_dir_label.grid(column=0, row=1, sticky='w', pady=(30, 0))
            self.file_browse.grid(column=1, row=1)

        self.options_1_button = tk.Label(self.root, text="Options 1", height=2, width=20, pady=30, bg='#606060', fg='white')
        self.options_2_button = tk.Label(self.root, text="Options 2", height=2, width=20, pady=30, bg='#606060', fg='white')

        self.root.grid_columnconfigure(1, weight=1)
        self.root.grid_rowconfigure(8, weight=1)

        self.options_1_button.grid(column=0, row=0, rowspan=2, sticky='we')
        self.options_1_button.bind('<Button-1>', options_1_click)

        self.options_2_button.grid(column=0, row=2, rowspan=2, sticky='we')
        self.options_2_button.bind('<Button-1>', options_2_click)

    def run(self):
        self.root.mainloop()


App().run()

Why are those lines appearing there and how can I avoid them?

Upvotes: 0

Views: 46

Answers (1)

Delrius Euphoria
Delrius Euphoria

Reputation: 15098

It is not some strange lines, just the labels background seen on the canvas border once your canvas is highlighted/clicked. You can disable this by:

self.canvas = tk.Canvas(self.root, bg='white', higlightthickness=0)

How does this work? From my personal inference, I think highlightbackground is a color when canvas does not have focus and highlightcolor is a color when there is focus. By default the values are:

print(self.canvas['highlightbackground']) # SystemButtonFace
print(self.canvas['highlightcolor']) # SystemWindowFrame
print(self.canvas['highlightthickness']) # 2

That is why when you click and it gain focus, it just changes the color around the canvas from SystemButtonFace to SystemWindowFrame and hence the difference in the background of the label nearside that has some of its area fallen in the border of the canvas.

Upvotes: 3

Related Questions