I'm writing a login interface, my problem is that the login button, and two other labels (one has an image attached to it) won't center in the window. I included a link to an image of the window in this question so you can get a better understanding of what's happening. The problem is in the loginButton, poweredByLabel and the gmailLabel. Here is my code:
emailLabel = Label(contactDeveloperWindow, font = (contactDeveloperFont), text = "Your email:", bg = "#DCDCDC")
emailLabel.grid(row = 1, column = 0, sticky = "w")
emailEntry = Entry(contactDeveloperWindow, font = (contactDeveloperFont), width = 40, borderwidth = 2, relief = "groove")
emailEntry.grid(row = 1, column = 1, columnspan = 3, sticky = "w")
emailEntry.insert(0, "example@gmail.com")
passwordLabel = Label(contactDeveloperWindow, font = (contactDeveloperFont), text = "Password: ", bg = "#DCDCDC")
passwordLabel.grid(row = 2, column = 0, sticky = "w")
passwordEntry = Entry(contactDeveloperWindow, font = (contactDeveloperFont), width = 37, borderwidth = 2, relief = "groove", show = "*")
passwordEntry.grid(row = 2, column = 1, sticky = "w")
hidePassword = ImageTk.PhotoImage(Image.open("hide.png"), master = contactDeveloperWindow)
togglePassword = Button(contactDeveloperWindow, image = hidePassword, relief = "groove", bg = "#DCDCDC", command = updatePassword)
togglePassword.image = hidePassword
togglePassword.grid(row = 2, column = 3, sticky = "w")
loginButton = Button(contactDeveloperWindow, font = (contactDeveloperFont), text = "Login", width = 17, padx = 5, pady = 5, relief = "groove", bg = "#DCDCDC")
loginButton.grid(row = 5, column = 0, columnspan = 3)
poweredByLabel = Label(contactDeveloperWindow, font = ('Consolas', 10), text = "powered by", bg = "#DCDCDC")
poweredByLabel.grid(row = 7, column = 0, columnspan = 3)
gmailLogo = ImageTk.PhotoImage(Image.open("powered by.png"), master = contactDeveloperWindow)
gmailLabel = Label(contactDeveloperWindow, image = gmailLogo, bg = "#DCDCDC")
gmailLabel.image = gmailLogo
gmailLabel.grid(row = 8, column = 0, columnspan = 3)
hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 0, column = 0, columnspan = 3, sticky = "we")
hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 3, column = 0, columnspan = 3, sticky = "we")
hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 4, column = 0, columnspan = 3, sticky = "we")
hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 6, column = 0, columnspan = 3, sticky = "we")
I can't run code so I only guess
You have to use column=2
instead of column=3
for togglePassword
If you want to keep column=3
then you have to use columnspan=4
instead of columnspan=3
because you will have from column=0
to column=3
which gives 4 columns.
EDIT: More complex change is to use two Frames
. At the top Frame
with Entries
using grid()
. At the bottom Frame
with login button and image using pack()
.
In example I keep only important elements. And I use pack(pady=...)
to create spaces between elements instead of using empty labels.
from tkinter import *
contactDeveloperWindow = Tk()
# --- top ---
top_frame = Frame(contactDeveloperWindow)
top_frame.pack(pady=10)
emailLabel = Label(top_frame, text="Your email:")
emailLabel.grid(row=1, column=0)
emailEntry = Entry(top_frame)
emailEntry.grid(row=1, column=1)
emailEntry.insert(0, "example@gmail.com")
passwordLabel = Label(top_frame, text="Password:")
passwordLabel.grid(row=2, column=0, sticky="w")
passwordEntry = Entry(top_frame, show="*")
passwordEntry.grid(row=2, column=1)
togglePassword = Button(top_frame, text="O")
togglePassword.grid(row=2, column=2)
# --- bottom ---
bottom_frame = Frame(contactDeveloperWindow)
bottom_frame.pack()
loginButton = Button(bottom_frame, text="Login")
loginButton.pack(pady=(0,10))
poweredByLabel = Label(bottom_frame, text="powered by")
poweredByLabel.pack(pady=(0,10))
gmailLabel = Label(bottom_frame, text="[place for logo]" )
gmailLabel.pack(pady=(0,10))
contactDeveloperWindow.mainloop()
You can do it even without bottom frame:
from tkinter import *
contactDeveloperWindow = Tk()
# --- top ---
top_frame = Frame(contactDeveloperWindow)
top_frame.pack(pady=10)
emailLabel = Label(top_frame, text="Your email:")
emailLabel.grid(row=1, column=0)
emailEntry = Entry(top_frame)
emailEntry.grid(row=1, column=1)
emailEntry.insert(0, "example@gmail.com")
passwordLabel = Label(top_frame, text="Password:")
passwordLabel.grid(row=2, column=0, sticky="w")
passwordEntry = Entry(top_frame, show="*")
passwordEntry.grid(row=2, column=1)
togglePassword = Button(top_frame, text="O")
togglePassword.grid(row=2, column=2)
# --- bottom ---
loginButton = Button(contactDeveloperWindow, text="Login")
loginButton.pack(pady=(0,10))
poweredByLabel = Label(contactDeveloperWindow, text="powered by")
poweredByLabel.pack(pady=(0,10))
gmailLabel = Label(contactDeveloperWindow, text="[place for logo]" )
gmailLabel.pack(pady=(0,10))
contactDeveloperWindow.mainloop()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.