Buttons appear in the wrong column using tkinter's grid layout manager

Question

I'm trying to make this really simple GUI using tkinter and I'm using grid as a layout manager. But when I place a certain button in column 2, it appears to the extreme left side of the window. I just want to place the buttons exactly where I want in the window but that doesn't seem to work.

I don't know what I'm doing wrong exactly but here's the code and a screenshot.

from tkinter import *

class GUI:


    #Initialize the application window

    def __init__(self):



        w = 520
        h = 350
        self.window = Tk()
        ws = self.window.winfo_screenwidth()
        hs = self.window.winfo_screenheight()
        x = (ws/2) -(w/2)
        y = (hs/2) -(h/2)
        self.window.title("Excel file import")
        self.window.geometry('%dx%d+%d+%d' % (w, h, x, y))
        self.window.configure(bg='#004A99')
        self.window.resizable(False,False)

        # self.logo = Image.open(LOGO)
        # self.log = self.logo.resize((150,105),Image.ANTIALIAS)
        # self.logo2 = ImageTk.PhotoImage(self.log)
        # self.lbl1 = Label(self.window, image=self.logo2)
        # self.lbl1.image = self.logo2
        # self.lbl1.grid(row=4, column=0, ipadx=0, ipady=0, pady=0, padx=0)

        self.homeDirectory = r'C:/Users/Shtlrs/Desktop/Clients folder/'
        self.cfgFile = self.homeDirectory + r'cfg.ini'



        #Add client button

        self.addClientBtn = Button(self.window, text="Add new client", bg='#1b98e0', fg="white",
                              width=20, height=1)
        self.addClientBtn.grid(row=2, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.addClientBtn.bind("<ButtonRelease-1>",self.addNewClient)


        #Select client button

        self.selectClientBtn = Button(self.window, text="Select existing client", bg='#1b98e0', fg="white",
                                   width=20, height=1)
        self.selectClientBtn.grid(row=3, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.selectClientBtn.bind("<ButtonRelease-1>",self.selectClient)

        # Delete client button

        self.deleteClientBtn = Button(self.window, text="Delete existing client", bg='red', fg="white",
                                      width=20, height=1)
        self.deleteClientBtn.grid(row=4, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.deleteClientBtn.bind("<ButtonRelease-1>",self.deleteClient)

        #Cients dropdown ( appears next to "select existing clients")

        # clients = ["Medtronic","Ancora","Momo"]
        # self.clientsDropDown = ttk.Combobox(self.window,values=clients)
        # self.clientsDropDown.grid(row=3,column=1, ipadx=5,ipady=5,pady=5,padx=5)
        # self.clientsDropDown.current(0)
        self.restart = Button(self.window, text="Restart", bg='#1b98e0', fg="white",
                              width=20, height=1)
        self.restart.grid(row=5, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.restart.bind("<ButtonRelease-1>", self.restartAPP)





        self.window.mainloop()

The code lacks a lot of other functions of course (For the bindings) But when I run this I get:

If you are expecting the window to be split into an 'even' grid, and the buttons to go into column2, that's not how the grid manager works. You have nothing in column 1, so the width is 0 and column 2 will appear as shown. What layout are you trying to achieve? — wstk, Apr 08 '20 at 10:39
Well, I just want to place them in the center for the start. — Amrou, Apr 08 '20 at 10:43
You can use column 0, and set `self.window.columnconfigure(0, weight=1)` to make that column fill the available space. Take a look at this answer about weights (https://stackoverflow.com/questions/45847313/what-does-weight-do-in-tkinter) — wstk, Apr 08 '20 at 10:54
Since you only have buttons in column 2 and you want those buttons in the center, then you can make column 2 to fill the window width by `self.window.columnconfigure(2, weight=1)`. — acw1668, Apr 08 '20 at 13:24

jizhihaoSAMA · Accepted Answer · 2020-04-08T11:05:01.123

Buttons appear in the wrong column using tkinter's grid layout manager

Actually,it is the right position.Due to the first column has no widget,so it seems it is in the "wrong" column.

You can create a frame,and put all of your buttons in it.And use .pack(anchor=Center) or .pack(anchor="center") to make the frame in the center.Also,you need to set the bg attribute of Frame to make sure they have the same color.

Followed by your code,a minimal example code is here:

from tkinter import *

class GUI:


    #Initialize the application window

    def __init__(self):



        w = 520
        h = 350
        self.window = Tk()
        ws = self.window.winfo_screenwidth()
        hs = self.window.winfo_screenheight()
        x = (ws/2) -(w/2)
        y = (hs/2) -(h/2)

        self.window.title("Excel file import")
        self.window.geometry('%dx%d+%d+%d' % (w, h, x, y))
        self.window.configure(bg='#004A99')
        self.window.resizable(False,False)

        self.buttonFrame = Frame(self.window,bg="#004A99") # create a new frame
        self.buttonFrame.pack(anchor=CENTER) # make it center

        # self.logo = Image.open(LOGO)
        # self.log = self.logo.resize((150,105),Image.ANTIALIAS)
        # self.logo2 = ImageTk.PhotoImage(self.log)
        # self.lbl1 = Label(self.window, image=self.logo2)
        # self.lbl1.image = self.logo2
        # self.lbl1.grid(row=4, column=0, ipadx=0, ipady=0, pady=0, padx=0)

        self.homeDirectory = r'C:/Users/Shtlrs/Desktop/Clients folder/'
        self.cfgFile = self.homeDirectory + r'cfg.ini'



        #Add client button

        self.addClientBtn = Button(self.buttonFrame, text="Add new client", bg='#1b98e0', fg="white",width=20, height=1) # put your button in the frame.
        self.addClientBtn.grid(row=2, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.addClientBtn.bind("<ButtonRelease-1>",self.addNewClient)


        #Select client button

        self.selectClientBtn = Button(self.buttonFrame, text="Select existing client", bg='#1b98e0', fg="white",width=20, height=1) # put your button in the frame.
        self.selectClientBtn.grid(row=3, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.selectClientBtn.bind("<ButtonRelease-1>",self.selectClient)

        # Delete client button

        self.deleteClientBtn = Button(self.buttonFrame, text="Delete existing client", bg='red', fg="white",width=20, height=1) # put your button in the frame.
        self.deleteClientBtn.grid(row=4, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.deleteClientBtn.bind("<ButtonRelease-1>",self.deleteClient)

        #Cients dropdown ( appears next to "select existing clients")

        # clients = ["Medtronic","Ancora","Momo"]
        # self.clientsDropDown = ttk.Combobox(self.buttonFrame,values=clients) # put it in the frame.
        # self.clientsDropDown.grid(row=3,column=1, ipadx=5,ipady=5,pady=5,padx=5)
        # self.clientsDropDown.current(0)
        self.restart = Button(self.buttonFrame, text="Restart", bg='#1b98e0', fg="white",
                              width=20, height=1)
        self.restart.grid(row=5, column=2, ipadx=5, ipady=5, pady=5, padx=5)
        self.restart.bind("<ButtonRelease-1>", self.restartAPP)





        self.window.mainloop()

#You need to revise all the functions below.
    def addNewClient(self):
        pass

    def selectClient(self):
        pass

    def deleteClient(self):
        pass

    def restartAPP(self):
        pass

start = GUI()

Now it is:

Thank you @jizhihaoSAMA, I think that's pretty useful. But is it okay to use 2 different layout managers in the same app ? Or can I also do it using the grid layout manager ? — Amrou, Apr 08 '20 at 11:07
@Amr Yes,you can use different layout managers in the same **app** but couldn't in the same window or frame. — jizhihaoSAMA, Apr 08 '20 at 11:38
Okay, nice. But I have another question, in the example you gave me, the application is not centered vertically. Why is that? Since you used anchor = center — Amrou, Apr 08 '20 at 12:14
If you want to make it centered vertically.You should use `.pack(anchor="center",expand=True)` — jizhihaoSAMA, Apr 08 '20 at 12:18

Buttons appear in the wrong column using tkinter's grid layout manager

1 Answers1