Button taking the entire frame even with pre-defined width and height-CodePudding

even though I have already defined the width and height of the buttons they seem to take the entire frame on their own. I am unable to understand the possible reason behind it.

import tkinter as tk

root = tk.Tk()
root.geometry('400x400')
root.columnconfigure(0, weight=1) 
root.grid_rowconfigure(0, weight=1)

main_frame = tk.Frame(root, bg="gray")
main_frame.grid(sticky='news')

f2 = tk.Frame(main_frame) # create a frame inside the main frame to attach scroll bar to
f2.grid(row=1, column=1, padx=5, pady=5, sticky='nw', columnspan=3) # for north, west

f2.grid_rowconfigure(0, weight=1)
f2.grid_columnconfigure(0, weight=1)

c2 = tk.Canvas(f2, bg="orange")
c2.grid(row=0, column=0, sticky="nsew")

hsb = tk.Scrollbar(f2, orient="horizontal", command=c2.xview, width=10)
hsb.grid(row=1, column=0, sticky='we') # west-east
c2.configure(xscrollcommand=hsb.set)

f2_c2 = tk.Frame(c2, bg="yellow")
c2.create_window((0, 0), window=f2_c2, anchor='nw')

b1 = tk.Button(f2_c2, relief='raised', width=200, height=200)
b1.grid(row=0, column=0 ,padx=5, pady=5)
b2 = tk.Button(f2_c2, relief='raised', width=200, height=200)
b2.grid(row=0, column=1, padx=5, pady=5)
b3 = tk.Button(f2_c2, relief='raised', width=200, height=200)
b3.grid(row=0, column=2, padx=5, pady=5)

f2_c2.update_idletasks()
c2.configure(scrollregion=c2.bbox("all"), width=400, height=400)

root.mainloop()

is there a workaround or is it something i am missing ?

CodePudding user response：

The width and height attributes of a button (and a few others) are documented to be in units of average-sized characters unless there is an image on the button. Thus, when you set the width to 200, that's 200 characters. If one character is 16 pixels wide, you're setting the width of the button to 3200 pixels.

If you want to specify the width in pixels, you can add an invisible pixel to the button.

img = tk.PhotoImage()
b1 = tk.Button(f2_c2, relief='raised', width=200, height=200, image=img, compound="c")
b2 = tk.Button(f2_c2, relief='raised', width=200, height=200, image=img, compound="c")
b3 = tk.Button(f2_c2, relief='raised', width=200, height=200, image=img, compound="c")

CodePudding user response：

#BUTTON
image_1 = tk.PhotoImage()
button_1 = tk.Button(f2_c2, relief='raised', width=200, height=200, image=image_1, compound="c")