I'm trying to create a short form in tkinter python but am new to the language. Whenever I click off of the text box the text underneath moves down vertically and the error message displayed has a white background which is displayed horizontally longer than the message, how do i fix these issues ? Any ideas are greatly appreciated, many thanks.
import tkinter as tk from tkinter import * from tkinter.ttk import * from PIL import Image, ImageTk # importing python imaging library from functools import partial ################################################### User's title input ################################################# def processTitle(window): # allowing the user to enter their title Label(window, text='Enter your title: ').grid(row=1, column=0, sticky = "ew", ipadx = 3, padx=20, pady=10) # text box usersTitle = Entry(window) # entry field usersTitle.grid(row=1, column=1, sticky = "ew", ipadx = 3, padx=5, pady=5) # placing the entry field next to the first question # label for displaying the error message if the user's title isn't valid titleValidationMessage = Label(window, text="") def titleValidation(event): title = usersTitle.get() #retieving the data from the text box next to title correctTitles = ["mr", "mrs", "miss", "ms", "dr", "sir", "lord"] if title.lower() in correctTitles: titleValidationMessage.grid_forget() # hide the label when there's no error message titleValidationMessage.config(text="") # clearing error messages from any previous input for first name else: titleValidationMessage.grid(row=1, column=2, sticky = "ew", ipadx = 3,padx=10, pady=(20)) # position of the error message titleValidationMessage.config(text="Please enter a legal title (Mr,Mrs,Miss,Ms,Dr,Sir,Lord)") # Bind the focus-out event - when the user clicks out of the text box the data will be validated usersTitle.bind("<FocusOut>", titleValidation) ################################################ End of User's title input ############################################# ################################################ User's first name input ############################################### def processFName(window): # label for displaying the error message if the first name isn't valid fNameValidationMessage = Label(window, text="") # allowing the user to enter their first name Label(window, text='Enter your first name: ').grid(row=3, column=0, sticky = "ew", ipadx = 3, padx=10, pady=5) # text usersFName = Entry(window) # entry field usersFName.grid(row=3, column=1, sticky = "ew", ipadx = 3, padx=10, pady=5) # placing the entry field next to the question def fNameValidation(event): fName = usersFName.get() #retieving the data from the text box for first name if len(fName) > 0: titleValidationMessage.grid_forget() # hide the label when there's no error message fNameValidationMessage.config(text="") # clearing error messages from any previous input for first name else: fNameValidationMessage.grid(row=4, column=0, pady=10) # position of the error message fNameValidationMessage.config(text="Please enter your first name") # Bind the focus-out event - when the user clicks out of the text box the data will be validated usersFName.bind("<FocusOut>", fNameValidation) ########################################### End of User's first name input ############################################# ################################################ User's last name input ################################################ def processLName(window): # label for displaying the error message if the last name isn't valid lNameValidationMessage = Label(window, text="") # allowing the user to enter their last name Label(window, text='Enter your last name: ').grid(row=5, column=0, sticky = "ew", ipadx = 3, padx=10, pady=5) # text usersLName = Entry(window) # entry field usersLName.grid(row=5, column=1,sticky = "ew", ipadx = 3, padx=10, pady=5) # placing the entry field next to the question def lNameValidation(event): lName = usersLName.get() #retieving the data from the text box for first name if len(lName) > 0: titleValidationMessage.grid_forget() # hide the label when there's no error message lNameValidationMessage.config(text="") # clearing error messages from any previous input for last name else: lNameValidationMessage.grid(row=6, column=0, pady=10) # position of the error message lNameValidationMessage.config(text="Please enter your last name") # Bind the focus-out event - when the user clicks out of the text box the data will be validated usersLName.bind("<FocusOut>", lNameValidation) ########################################### End of User's last name input ############################################## ###################################### Creating a member of staff's account ############################################ # runs when the Create Staff Account button is clicked def createSAccount(window): window.withdraw() # hides old window createSAccountWindow = tk.Toplevel() # creates a new window createSAccountWindow.attributes("-fullscreen", True) createSAccountWindow.configure(background="#a42424") # Setting the grid layout for the creating a staff member's account window # Ensure all rows have a minimal weight to prevent vertical jumping for i in range(10): # Configuring 10 rows createSAccountWindow.grid_rowconfigure(i, weight=0) # Column 0: Size for the entry labels createSAccountWindow.grid_columnconfigure(0, weight=0, minsize=100) # Column 1: Size for the Entry boxes # The sticky="nsew" on the Entry widget will ensure it fills this fixed column width. createSAccountWindow.grid_columnconfigure(1, weight=0, minsize=200) # Column 2: This column will absorb all extra horizontal space (weight=1). # This keeps the other columns stable and pins the error message to the left edge of this flexible space. createSAccountWindow.grid_columnconfigure(2, weight=1) #displaying the page title createSTitle = tk.Label( createSAccountWindow, text="Creating staff account", font=("Canva sans", 36, "bold"), # Font family, size, style (bold/italic) fg="white", # Text color bg="#a42424", ) createSTitle.grid(row=0, column=0, columnspan=3, sticky = "nsew", pady=30) # default sticky = center processTitle(createSAccountWindow) processFName(createSAccountWindow) processLName(createSAccountWindow) # runs when the Staff Login button is clicked def staffLogin(): print("Button was clicked!") def createOrLoginMenu(): # creating the window window = tk.Tk() # setting the grid layout of the window window.rowconfigure(0, {"minsize": 30} ) window.columnconfigure(0, {"minsize": 30} ) # making the window fullscreen window.attributes("-fullscreen", True) ################################################### Design elements ################################################ window.option_add("*Font", "Helvetica 16 bold") # default font and size window.option_add("*Foreground", "red") # default text color window.option_add("*Background", "#f4f4f4") # optional default background ############################################### End of Design elements ############################################# # Opening the banner banner = Image.open("/Users/abioshea/Downloads/TapasBanner.png") # obtaining the banner # Re-sizing the banner resized_banner_width = window.winfo_screenwidth() # resizing the banner to the screen width width, height = banner.size # width and height of the banner size_ratio = height / width # calculating the ratio of the photo resized_banner_height = int( resized_banner_width * size_ratio) # calculating the size of the new height dependent on the size of the screen resized_banner = banner.resize((resized_banner_width, resized_banner_height)) resized_banner = ImageTk.PhotoImage(resized_banner) # converting it into a format readable by tkinter # calculating the size of the new banner resized_banner_label = tk.Label(window, image=resized_banner, borderwidth=0) # creating a label to display the banner # displaying the resized banner resized_banner_label.grid() # adds the image to the window # creating the create staff member account button create_s_account_button = tk.Button(window, text="Create an account", command=partial(createSAccount,window),# runs this function when button is clicked activebackground="#d94c4c", # colour when mouse is on button activeforeground="white", # text colour when mouse is on button anchor="center", bd=2, # border width bg="#a42424", # normal background colour fg="white", # normal text colour font=("Canva Sans", 36), height=4, # height of button in text lines overrelief="raised", width=15, # width of the button in letters padx=5, # padding on the x-axis pady=5, ) create_s_account_button.grid(pady=(80, 30)) # pady is the top and bottom padding # login to staff member account button login_s_account_button = tk.Button(window, text="Login", command=staffLogin, activebackground="#d94c4c", # colour when mouse is on button activeforeground="white", # text colour when mouse is on button anchor="center", bd=2, # border width bg="#a42424", # normal background colour fg="white", # normal text colour font=("Canva Sans", 36), height=4, # height of button in text lines overrelief="raised", width=15, # width of the button in letters padx=5, pady=5, ) login_s_account_button.grid(pady=(0, 30)) # pady is the top and bottom padding window.mainloop() # keeping the window open ###################################################### Main Programme ################################################### createOrLoginMenu()
pady=(20)intitleValidationMessage.grid(...). Remove it.titleValidationMessageinsideprocessFName()andprocessLName()should befNameValidationMessageandlNameValidationMessagecorrespondingly.