TKinter space between buttons

Question

I am trying to make a calculator on TKinter, but for some reason, on the graphic design, I am gettin so much space between the buttons. I don't know what am I doing wrong. I want them almost together, but the space I am getting between them, it's just absurd.

I think I wrote everything correctly, but am I missing maybe some atribute?

May you help me, thanks!

from tkinter import *

ROOT = Tk()
ROOT.title("Da Calculator")
ROOT.geometry("292x306")
ROOT.resizable(0,0)
ROOT.config(bg="grey")

# Screen
SCREEN = Entry(bg="black",
               fg="green",
               width=30,
               borderwidth=0,
               font=("arial", 20, "bold")).grid(row=0, column=0, columnspan=4)


# Functions


# Buttons
button_1 = Button(ROOT,
                 text="1",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=1, column=0)


button_2 = Button(ROOT,
                 text="2",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=1, column=1)

button_3 = Button(ROOT,
                 text="3",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=1, column=2)

button_4 = Button(ROOT,
                 text="4",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=2, column=0)

button_5 = Button(ROOT,
                 text="5",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=2, column=1)

button_6 = Button(ROOT,
                 text="6",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=2, column=2)

button_7 = Button(ROOT,
                 text="7",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=3, column=0)

button_8 = Button(ROOT,
                 text="8",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=3, column=1)

button_9 = Button(ROOT,
                 text="9",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=3, column=2)

button_0 = Button(ROOT,
                 text="0",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=4, column=1)

button_total = Button(ROOT,
                 text="=",
                 width=9,
                 height=3,
                 bg="red",
                 fg="white",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=4, column=0)

button_dot = Button(ROOT,
                 text=".",
                 width=9,
                 height=3,
                 bg="green",
                 fg="black",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=4, column=2)

button_sum = Button(ROOT,
                    text="+",
                    width=9,
                    height=3,
                    bg="deep sky blue",
                    fg="black",
                    borderwidth=0,
                    cursor="hand2",
                    command="").grid(row=1, column=3)

button_minus = Button(ROOT,
                      text="-",
                      width=9,
                      height=3,
                      bg="deep sky blue",
                      fg="black",
                      borderwidth=0,
                      cursor="hand2",
                      command=""). grid(row=2, column=3)

button_mult = Button(ROOT,
                     text="*",
                     width="9",
                     height=3,
                     bg="deep sky blue",
                     fg="black",
                     borderwidth=0,
                     cursor="hand2",
                     command="").grid(row=3, column=3)

button_div = Button(ROOT,
                    text="/",
                    width=9,
                    height=0,
                    borderwidth=0,
                    bg="deep sky blue",
                    fg="black",
                    cursor="hand2",
                    command="").grid(row=4, column=3)

button_clear = Button(ROOT,
                      text="CLEAR",
                      height=3,
                      borderwidth=0,
                      bg="deep sky blue",
                      fg="white",
                      cursor="hand2",
                      command="").grid(row=5, column=0, columnspan=4)


ROOT.mainloop()

Fixed code:

from tkinter import *

ROOT = Tk()
ROOT.title("Da Calculator")
ROOT.geometry("292x306")
ROOT.resizable(0,0)
ROOT.config(bg="grey")

# Screen
SCREEN = Entry(ROOT,
               bg="black",
               fg="green",
               width=22,
               borderwidth=0,
               font=("arial", 18, "bold"))

SCREEN.grid(row=0, padx=2, pady=2, columnspan=4)


# Functions


# Buttons
button_1 = Button(ROOT,
                 text="1",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=1, column=0, padx=1, pady=1)


button_2 = Button(ROOT,
                 text="2",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=1, column=1, padx=1, pady=1)

button_3 = Button(ROOT,
                 text="3",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=1, column=2, padx=1, pady=1)

button_4 = Button(ROOT,
                 text="4",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=2, column=0, padx=1, pady=1)

button_5 = Button(ROOT,
                 text="5",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=2, column=1, padx=1, pady=1)

button_6 = Button(ROOT,
                 text="6",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=2, column=2, padx=1, pady=1)

button_7 = Button(ROOT,
                 text="7",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=3, column=0, padx=1, pady=1)

button_8 = Button(ROOT,
                 text="8",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=3, column=1, padx=1, pady=1)

button_9 = Button(ROOT,
                 text="9",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=3, column=2, padx=1, pady=1)

button_0 = Button(ROOT,
                 text="0",
                 width=9,
                 height=3,
                 bg="white",
                 fg="red",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=4, column=1, padx=1, pady=1)

button_total = Button(ROOT,
                 text="=",
                 width=9,
                 height=3,
                 bg="red",
                 fg="white",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=4, column=0, padx=1, pady=1)

button_dot = Button(ROOT,
                 text=".",
                 width=9,
                 height=3,
                 bg="green",
                 fg="black",
                 borderwidth=0,
                 cursor="hand2",
                 command="").grid(row=4, column=2, padx=1, pady=1)

button_sum = Button(ROOT,
                    text="+",
                    width=9,
                    height=3,
                    bg="deep sky blue",
                    fg="black",
                    borderwidth=0,
                    cursor="hand2",
                    command="").grid(row=1, column=3, padx=1, pady=1)

button_minus = Button(ROOT,
                      text="-",
                      width=9,
                      height=3,
                      bg="deep sky blue",
                      fg="black",
                      borderwidth=0,
                      cursor="hand2",
                      command=""). grid(row=2, column=3, padx=1, pady=1)

button_mult = Button(ROOT,
                     text="*",
                     width="9",
                     height=3,
                     bg="deep sky blue",
                     fg="black",
                     borderwidth=0,
                     cursor="hand2",
                     command="").grid(row=3, column=3, padx=1, pady=1)

button_div = Button(ROOT,
                    text="/",
                    width=9,
                    height=3,
                    borderwidth=0,
                    bg="deep sky blue",
                    fg="black",
                    cursor="hand2",
                    command="").grid(row=4, column=3, padx=1, pady=1)

button_clear = Button(ROOT,
                      text="CLEAR",
                      width=40,
                      height=3,
                      borderwidth=0,
                      bg="deep sky blue",
                      fg="white",
                      cursor="hand2",
                      command="").grid(row=5, column=0, columnspan=4, padx=1, pady=1)


ROOT.mainloop()

I've fixed the code in the end, by changing the scale of the SCREEN, and adding a padx= and pady= attributes. Also had wronged the button_div and changed the scale of CLEAR button.

Your buttons are all children of the `ROOT` window (which shouldn't be capitalized, but that's another issue), so they'll try to fill the space defined by the window `geometry`. One solution is to create a `Frame` to act as a container for the `Buttons` and set the size of the frame to something more suitable. As a side note, you should move all the `grid` calls to their own lines, e.g. `button_1.grid(...)`; as written, all of your `Buttons` are evaluating to `None` because `grid` returns `None`, which will trip you up later! — JRiggles, May 22 '23 at 16:01
Try adding `sticky="nsew"` to those `.grid(...)`. Better remove `ROOT.geometry(...)` as it may make the window too small to show all the buttons. — acw1668, May 23 '23 at 02:33
I've fixed it in the end. I've posted the changes in the main question. — Lorak, May 23 '23 at 23:52

TKinter space between buttons

0 Answers0