1

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() 
3
  • Seems you provided full code which contains many question-unrelated parts. Try trimming it down to make Minimal Reproducible Example which helps not only the others who uses their time answering the question, but yourself to solve the question even before asking on SO. Commented 10 hours ago
  • 1
    It is because you used pady=(20) in titleValidationMessage.grid(...). Remove it. Commented 9 hours ago
  • Also titleValidationMessage inside processFName() and processLName() should be fNameValidationMessage and lNameValidationMessage correspondingly. Commented 9 hours ago

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.