Amrou
Amrou

Reputation: 489

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

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: enter image description here

Upvotes: 0

Views: 297

Answers (1)

jizhihaoSAMA
jizhihaoSAMA

Reputation: 12672

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: enter image description here

Upvotes: 3

Related Questions