Only a single pixel visible in place of a Frame in Tkinter

Question

I am creating a form for booking a table in Tkinter. I wanted to add border color to a Button, so I created a Frame and placed the Button inside the Frame. But after making the Frame and placing the button inside the Frame, the Button disappeared and I can just see a single pixel of the desired color in place of the Frame.

b_sel_date_border=Frame(x)
b_sel_date_border["highlightthickness"]=5
b_sel_date_border["highlightbackground"]="#00f3b2"
b_sel_date_border["bd"]=0
b_sel_date_border["padx"]=50
b_sel_date_border["pady"]=50

b_sel_date=Button(b_sel_date_border)
b_sel_date["text"]="Select date"
b_sel_date["bg"]="#310054"
b_sel_date["fg"]="#00f3b2"
b_sel_date["bd"]=0
b_sel_date["font"]=("Arial",12,"bold")
b_sel_date["activebackground"]="#310054"
b_sel_date["activeforeground"]="#00f3b2"
b_sel_date.place(x=500,y=380)
b_sel_date_border.place(x=500,y=380)

You're going to find Tkinter *vastly* easier to use if you learn to use the `.pack()` and `.grid()` geometry managers. They do so much for you that you'd have to do manually if you use `.place()`. — jasonharper, Sep 14 '21 at 14:15

Derek · Answer 1 · 2021-09-14T23:16:00.830

When using place manager it is important to know that the coordinate system is related to the container in which the object is positioned.

Frame b_sel_date_border is in Tk container so the coordinates are related to the top left corner of the x window.

So b_sel_date_border.place(x = 0, y = 0, width = 200, height = 150) will place the frame at the top left corner of x

Button b_sel_date is in frame b_sel_date_border so its coordinates are referenced to the top left corner of frame b_sel_date_border.

So setting b_sel_date as b_sel_date.place(x = 0, y = 0) will place the frame at the top left corner of b_sel_date_border.

Here is a more convenient way of defining Frame and Button attributes by separating data declaration from object declaration.

This makes it much easier to read and debug.

import tkinter as tk

frame = dict(
    highlightthickness = 5, highlightbackground = "#00f3b2",
    bd = 0, padx = 50, pady = 50)

button = dict(
    text = "Select date", bg = "#310054", fg = "#00f3b2",
    bd = 0, font = "Arial 12 bold", activebackground = "#310054",
    activeforeground = "#00f3b2")

x = tk.Tk()

b_sel_date_border = tk.Frame( x, **frame)
b_sel_date_border.place(x = 0, y = 0, width = 200, height = 150)

b_sel_date = tk.Button(b_sel_date_border, **button)
b_sel_date.place(x = 0, y = 0)

x.geometry("201x151")
x.mainloop()

Only a single pixel visible in place of a Frame in Tkinter

1 Answers1