0

I am trying to create a window for my Tic Tac Toe game. In the main root window(dimensions->height =700 , width=600) I have created two frames .

1:The top frame is called ActionArea and has dimensions-> Height=600 and width=600

2:The bottom frame is called StatArea and has dimensions-> Height=100 and width=600

In the top frame, I have placed 9 buttons, each having an equal size of 200 * 200

This was my expectations : My expectations on how the Window would look

This is the reality I am getting on running the code: this is the output I am getting on running my code

This is the relevant part of the code:

root=tk.Tk()
root.title("TIC TAC TOE")
root.geometry("600x700")


#creating two frames
ActionArea=tk.Frame(root,height=600,width=600,bg="AliceBlue")
StatArea=tk.Frame(root,height=100,width=600,bg="RoyalBlue")

#placing the frames onto root window
ActionArea.grid(row=0,column=0)
StatArea.grid(row=1,column=0)

#creating the buttons
b1=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b2=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b3=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b4=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b5=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b6=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b7=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b8=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")
b9=tk.Button(ActionArea,text="", height=200,width=200,bg="AliceBlue")

#packing the buttons
b1.grid(row=0,column=0)
b2.grid(row=0,column=1)
b3.grid(row=0,column=2)
b4.grid(row=1,column=0)
b5.grid(row=1,column=1)
b6.grid(row=1,column=2)
b7.grid(row=2,column=0)
b8.grid(row=2,column=1)
b9.grid(row=2,column=2)

So.many doubts. I accurate sized every button to 200 * 200 to fit my top frame which is of dimensions 600 * 600. However, as you can see, the button is becoming ridiculously large. Why is this happening?

Bryan Oakley
  • 370,779
  • 53
  • 539
  • 685

1 Answers1

1

That's exactly because you sized the button with height=200, width=200. tkinter.Button height and width are not always in pixels. From the documentation:

height=
The height of the button. If the button displays text, the size is given in text units. If the button displays an image, the size is given in pixels (or screen units). If the size is omitted, it is calculated based on the button contents. (height/Height)

width=
The width of the button. If the button displays text, the size is given in text units. If the button displays an image, the size is given in pixels (or screen units). If the size is omitted, or zero, it is calculated based on the button contents. (width/Width)

Your buttons contains text = "", so the size is in text unit, which is bigger that pixels.

Usually you do not need to set the size of each frame explicitly, especially if you want to make them all of the same size. Have a look here for example.

Valentino
  • 7,291
  • 6
  • 18
  • 34