Why doesn't the buttons align up properly?

Admin 1
Viewed 63

So, I have been trying to design a simple calculator GUI using Tkinter. But I am facing this weird issue that I can't fix. This is my code, I hope it doesn't look messy.

from tkinter import *

root = Tk()

display = Entry(root,width=48,borderwidth=5)
display.grid(row=0,column=0,columnspan=3)

button_1 = Button(root, text="1",width=16,height=3)
button_2 = Button(root, text="2",width=16,height=3)
button_3 = Button(root, text="3",width=16,height=3)
button_4 = Button(root, text="4",width=16,height=3)
button_5 = Button(root, text="5",width=16,height=3)
button_6 = Button(root, text="6",width=16,height=3)
button_7 = Button(root, text="7",width=16,height=3)
button_8 = Button(root, text="8",width=16,height=3)
button_9 = Button(root, text="9",width=16,height=3)
button_0 = Button(root, text="0",width=16,height=3)

button_clear = Button(root, text="Clear",width=32,height=3)
button_plus = Button(root, text="+",width=16,height=3)
button_equal = Button(root, text="=",width=32,height=3)

button_1.grid(row=3,column=0)
button_2.grid(row=3,column=1)
button_3.grid(row=3,column=2)

button_4.grid(row=2,column=0)
button_5.grid(row=2,column=1)
button_6.grid(row=2,column=2)

button_7.grid(row=1,column=0)
button_8.grid(row=1,column=1)
button_9.grid(row=1,column=2)

button_0.grid(row=4,column=0)

button_clear.grid(row=4,column=1,columnspan=2)
button_plus.grid(row=5,column=0)
button_equal.grid(row=5,column=1,columnspan=2)

root.mainloop()

Here's a screenshot of the GUI

First Problem: Why doesn't the clear and equal button align up with the 3, 6, 9 buttons, just look at the right margin of the buttons, how its not properly aligned.

I have set the width for buttons 3, 6, 9 as 16 and for clear and equal buttons its just double 32, and also these clear and equal buttons have column-span of 2 columns.

Second Problem: This is a secondary issue since it doesn't make the GUI look ugly. Why does't the entry widget on the top match the width of the number buttons below it, the entry widget's width is set to 48, thrice the individual buttons.

Thanks In Advance!

pypy tkinter python
2 Answers

The problem is that the button is literally too small to take up 2 columns, and tkinter doesn't stretch them up automatically. You'd have to configure the stretching manually using sticky property so it knows the direction(s) of the stretch: button_clear.grid(row=4,column=1,columnspan=2, sticky='we'). Here is your full code fixed:

from tkinter import *

root = Tk()

display = Entry(root,width=48,borderwidth=5)
display.grid(row=0,column=0,columnspan=3)

button_1 = Button(root, text="1",width=16,height=3)
button_2 = Button(root, text="2",width=16,height=3)
button_3 = Button(root, text="3",width=16,height=3)
button_4 = Button(root, text="4",width=16,height=3)
button_5 = Button(root, text="5",width=16,height=3)
button_6 = Button(root, text="6",width=16,height=3)
button_7 = Button(root, text="7",width=16,height=3)
button_8 = Button(root, text="8",width=16,height=3)
button_9 = Button(root, text="9",width=16,height=3)
button_0 = Button(root, text="0",width=16,height=3)

button_clear = Button(root, text="Clear",width=32,height=3)
button_plus = Button(root, text="+",width=16,height=3)
button_equal = Button(root, text="=",width=32,height=3)

button_1.grid(row=3,column=0)
button_2.grid(row=3,column=1)
button_3.grid(row=3,column=2)

button_4.grid(row=2,column=0)
button_5.grid(row=2,column=1)
button_6.grid(row=2,column=2)

button_7.grid(row=1,column=0)
button_8.grid(row=1,column=1)
button_9.grid(row=1,column=2)

button_0.grid(row=4,column=0)

button_clear.grid(row=4,column=1,columnspan=2, sticky='we')
button_plus.grid(row=5,column=0)
button_equal.grid(row=5,column=1,columnspan=2, sticky='we')

root.mainloop()

Hope that's helpful!

user_107132440

I have made some changes according to above and also made it look-good.

Try this:

from tkinter import *

root = Tk()

display = Entry(root,width=33,borderwidth=5, font = ('Helvetica',15, 'bold'))
display.grid(row=0,column=0,columnspan=3,  ipady =10)

button_1 = Button(root, text="1",width=16,height=3, bd =5)
button_2 = Button(root, text="2",width=16,height=3, bd =5)
button_3 = Button(root, text="3",width=16,height=3, bd =5)
button_4 = Button(root, text="4",width=16,height=3, bd =5)
button_5 = Button(root, text="5",width=16,height=3, bd =5)
button_6 = Button(root, text="6",width=16,height=3, bd =5)
button_7 = Button(root, text="7",width=16,height=3, bd =5)
button_8 = Button(root, text="8",width=16,height=3, bd =5)
button_9 = Button(root, text="9",width=16,height=3, bd =5)
button_0 = Button(root, text="0",width=16,height=3, bd =5)

button_clear = Button(root, text="Clear",width=32,height=3, bd =5)
button_plus = Button(root, text="+",width=16,height=3, bd =5)
button_equal = Button(root, text="=",width=32,height=3, bd =5)

button_1.grid(row=3,column=0)
button_2.grid(row=3,column=1)
button_3.grid(row=3,column=2)

button_4.grid(row=2,column=0)
button_5.grid(row=2,column=1)
button_6.grid(row=2,column=2)

button_7.grid(row=1,column=0)
button_8.grid(row=1,column=1)
button_9.grid(row=1,column=2)

button_0.grid(row=4,column=0)

button_clear.grid(row=4,column=1,columnspan=2, sticky = 'we')
button_plus.grid(row=5,column=0)
button_equal.grid(row=5,column=1,columnspan=2, sticky = 'we')

root.mainloop()

Output:

Output

user_134931060
Related