Button location(grid) in tkinter Python

Question

Hey guys I have a problem and I have been searching for answers but I can't seem to solve my problem.

I want to move my "Enter" and "Quit" buttons more to the bottom of my window but I'm not sure I understand the grid function.

I made two frames inside my window and the buttons are in the bottom frame but I can't seem to get them lower with the row function.

I'm like just started with Python and have no experience with programming so this is my first project.(please don't laugh)

#import tkinder module
from tkinter import *

#make frame
root = Tk()
root.geometry("600x300")

top_frame = Frame(root)
bottom_frame = Frame(root)

top_frame.pack()
bottom_frame.pack()

#headline
headline = Label(top_frame, text="Welcome to PrintAssistant.", bg='blue', fg='white')
headline.config(font=('Courier', 27))
headline.grid(padx=10, pady=10)

Name = Label(bottom_frame, text="Name:", fg='blue')
Name.config(font=('Courier', 20))
Name.grid(row=1)

Password = Label(bottom_frame, text="Password:", fg='blue')
Password.config(font=('Courier', 20))
Password.grid(row=2)

Name_entry = Entry(bottom_frame)
Name_entry.grid(row=1, column=1)

Password_entry = Entry(bottom_frame)
Password_entry.grid(row=2, column=1)

#enter_button
enter_button = Button(bottom_frame, text="Enter", bg='blue', fg='white')
enter_button.config(height = 2, width = 15)
enter_button.grid(sticky = S)

#quit_button
quit_button = Button(bottom_frame, text="Quit", bg="blue", fg="white")
quit_button.config(height = 2, width = 15)
quit_button.grid(sticky = S)


root.mainloop() 

Answer 1

Here is a quick and simple way to have your buttons sit at the bottom of your program.

First move enter_button and quit_button to the root window. A frame is not needed here.

then add root.rowconfigure() and apply a weight of 1 to the row the buttons are on. Configuring the row with a weight allows that row to expand and contract with the frame or window it is placed in. In this case we placed the buttons in root so we configured root. You could do the same to a frame but that is just adding another layer that is not needed for something simple like this.

Here is a section of code you can replace in your program and the result should be what you are looking for. Note I placed the buttons side by side but you can accomplish a top to bottom with the same method.

Edit:

I forgot to add the columnspan part. You also need to add a columnspan of the other frames so you can have your buttons placed centered when side by side. A columspan is used to tell the program how many columns that widget is going to be taking up. the same can be done with rows as well.

top_frame.grid(row = 0, column = 0, columnspan = 2)
bottom_frame.grid(row = 1, column = 0, columnspan = 2)


root.rowconfigure(2, weight = 1)
#enter_button
enter_button = Button(root, text="Enter", bg='blue', fg='white')
enter_button.config(height = 2, width = 15)
enter_button.grid(row = 2, column=0, sticky = 'se')

#quit_button
quit_button = Button(root, text="Quit", bg="blue", fg="white")
quit_button.config(height = 2, width = 15)
quit_button.grid(row = 2, column=1, sticky = 'sw')

If you want to keep the enter button on top of the quit button then you could do the following.

top_frame.grid(row = 0, column = 0) # remove columnspan or set it to 1
bottom_frame.grid(row = 1, column = 0)# remove columnspan or set it to 1


root.rowconfigure(2, weight = 1)
root.rowconfigure(3, weight = 0)
#enter_button
enter_button = Button(root, text="Enter", bg='blue', fg='white')
enter_button.config(height = 2, width = 15)
enter_button.grid(row = 2, column = 0, sticky = 's')

#quit_button
quit_button = Button(root, text="Quit", bg="blue", fg="white")
quit_button.config(height = 2, width = 15)
quit_button.grid(row = 3, column = 0, sticky = 's')

If you are just trying to place a little space between your entry fields and buttons you could use an spacer label. Something like this:

#empty row spacers
spacer1 = Label(bottom_frame, text = "")
spacer1.grid(row = 3)
spacer2= Label(bottom_frame, text = "")
spacer2.grid(row = 4)
#enter_button
enter_button = Button(bottom_frame, text="Enter", bg='blue', fg='white')
enter_button.config(height = 2, width = 15)
enter_button.grid(row = 5, column=1)
#quit_button
quit_button = Button(bottom_frame, text="Quit", bg="blue", fg="white")
quit_button.config(height = 2, width = 15)
quit_button.grid(row = 6, column=1)

Answer 2

I think you can do it by adding an extra Frame and set it to the bottom. After that put the Enter and Quit buttons on that frame. I have modified your code and you can try it.

#import tkinder module
from tkinter import *

#make frame
root = Tk()
root.geometry("600x300")

top_frame = Frame(root)
center_frame = Frame(root)
bottom_frame = Frame(root)

top_frame.pack()
center_frame.pack()
bottom_frame.pack(side = BOTTOM, fill = BOTH)

#headline
headline = Label(top_frame, text="Welcome to PrintAssistant.", bg='blue',    fg='white')
headline.config(font=('Courier', 27))
headline.grid(padx=10, pady=10)

Name = Label(center_frame, text="Name:", fg='blue')
Name.config(font=('Courier', 20))
Name.grid(row=1)

Password = Label(center_frame, text="Password:", fg='blue')
Password.config(font=('Courier', 20))
Password.grid(row=2)

Name_entry = Entry(center_frame)
Name_entry.grid(row=1, column=1)

Password_entry = Entry(center_frame)
Password_entry.grid(row=2, column=1)

#enter_button
enter_button = Button(bottom_frame, text="Enter", bg='blue', fg='white')
enter_button.config(height = 2, width = 15)
enter_button.pack()

#quit_button
quit_button = Button(bottom_frame, text="Quit", bg="blue", fg="white")
quit_button.config(height = 2, width = 15)
quit_button.pack()


root.mainloop() 

Please leave a comment if it worked for you :)