Develop Reference

Blank page when removing all mentions of grid()

I've switched from .grid() to .place() in my program, so I decided to remove a frame that contained the grid widgets:
BackButtonR = Button(registerPage, text="Back", command=lambda: show_frame(Menu))
BackButtonR.grid(row=0, column=0, sticky=W)
Button2F3 = Button(registerPage, text="Find")
Button2F3.grid(row=1, column=1)
Button3F3 = Button(registerPage, text="Calculate").grid(row=6, column=1)
LabelTitleF3 = Label(registerPage, text="Calculate Buy Price").grid(row=0, column=3)
label1F3 = Label(registerPage, text="Enter Ticker Symbol:").grid(row=1, column=0)
label2F3 = Label(registerPage, text="Expected CAGR").grid(row=2, column=0)
label3F3 = Label(registerPage, text="Years of Analysis").grid(row=3, column=0)
label4F3 = Label(registerPage, text="Expected PE Ratio").grid(row=4, column=0)
label5F3 = Label(registerPage, text="Desired Annual Return").grid(row=5, column=0)
entry1F3 = Entry(registerPage, width=7).grid(row=1, column=1, padx=0)
entry2F3 = Entry(registerPage).grid(row=2, column=1, pady=10, padx=0)
entry3F3 = Entry(registerPage).grid(row=3, column=1, pady=10, padx=0)
entry4F3 = Entry(registerPage).grid(row=4, column=1, pady=10, padx=0)
entry5F3 = Entry(registerPage).grid(row=, column=1, pady=10, padx=0)
But weirdly, when I rerun my program everything turns blank. This shouldn't happen, since I've removed any reference to .grid(), so the program should be working fine with .place(). Here is my full code:
print(220+135)
from tkinter import *
root = Tk()
root.title("Account Signup")
DarkBlue = "#2460A7"
LightBlue = "#B3C7D6"
root.geometry('350x230')
Menu = Frame(root)
loginPage = Frame(root)
registerPage = Frame(root)
for AllFrames in (Menu, loginPage, registerPage):
AllFrames.grid(row=0, column=0, sticky='nsew')
AllFrames.configure(bg=LightBlue)
def show_frame(frame):
frame.tkraise()
show_frame(Menu)
# ============= Menu Page =========
Menu.grid_columnconfigure(0, weight=1)
menuTitle = Label(Menu, text="Menu", font=("Arial", 25), bg=LightBlue)
menuTitle.place(x=130, y=25)
loginButton1 = Button(Menu, width=25, text="Login", command=lambda: show_frame(loginPage))
loginButton1.place(x=85, y=85)
registerButton1 = Button(Menu, width=25, text="Register", command=lambda: show_frame(registerPage))
registerButton1.place(x=85, y=115)
# ======== Login Page ===========
loginUsernameL = Label(loginPage, text='Username').place(x=30, y=60)
loginUsernameE = Entry(loginPage).place(x=120, y=60)
loginPasswordL = Label(loginPage, text='Password').place(x=30, y=90)
loginPasswordE = Entry(loginPage).place(x=120, y=90)
backButton = Button(loginPage, text='Back', command=lambda: show_frame(Menu)).place(x=0, y=0)
loginButton = Button(loginPage, text='Login', width=20).place(x=100, y=150)
# ======== Register Page ===========
root.mainloop()
Why is my program turning blank?

When you use pack and grid, these functions will normally adjust the size of a widget's parent to fit all of its children. It's one of the most compelling reasons to use these geometry managers.
When you use place this doesn't happen. If you use place to put a widget in a frame, the frame will not grow or shrink to fit the widget.
In your case you're creating Menu, loginPage and registerPage and not giving them a size so they default to 1x1 pixels. When you use place to add a widget to the frame, the frame will remain at 1x1 pixels, rendering it virtually invisible.
The solution is to either give these frames an explicit size, or add the frames to the window with options that cause them to fill the window.
For illustrative purposes I've changed the background color of the window to pink, and set the size of Menu to 200x200. As you can see in the following screenshot, the frame with the widgets is there, and becomes visible when you give it a larger size. Of course, one problem with place is it's up to you to calculate the appropriate size.
The better solution in this specific case would be to use the appropriate grid options to have the frames fill the window. You can do that by giving a weight to the row and column that the frames are in. Unused space in the parent frame will be allocated to the row and column with the widget.
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
Generally speaking, grid and pack are superior to place for implementing most layouts because they are able to automatically make all widgets fit into a window with very little work. With place it's up to you to do calculations for position and size, and to make sure that all ancestors are appropriately sized and are visible.

You need to call root.grid_rowconfigure(0, weight=1) and root.grid_columnconfigure(0, weight=1) so that the shown frame use all the space of root window, otherwise the size of those frames are 1x1.
Also Menu.grid_columnconfigure(0, weight=1) is useless because widgets inside Menu are using .place().

How to make text show up in a specific location on a Tkinter window

please see the code below. Working on a 100 days of code project. How to I make text appear in a specific position (x=400, y=150) for example on a window.
Please see my code below.
from tkinter import *
from tkinter import messagebox
BACKGROUND_COLOR = "#B1DDC6"
window = Tk()
window.title('Flashy')
window.config(padx=50, pady=50, bg=BACKGROUND_COLOR)
# Todo. Center the front of the card.
canvas = Canvas(width=800, height=526, bg=BACKGROUND_COLOR, highlightthickness=0)
card_front = PhotoImage(file='images/card_front.png')
canvas.create_image(400, 263, image=card_front)
canvas.grid(row=0, column=1, columnspan=2)
# Placing text on the card.
text_1 = Label(text="French", bg='white', font=("Ariel", 40, "italic"), fg='black')
text_1.goto(x=400, y=150)
text_1.grid(row=0, column=0, columnspan=2)
# Buttons
check_mark = PhotoImage(file='images/right.png')
check_mark_button = Button(image=check_mark, highlightthickness=0)
check_mark_button.grid(row=1, column=2)
wrong_mark = PhotoImage(file='images/wrong.png')
wrong_mark_button = Button(image=wrong_mark, highlightthickness=0)
wrong_mark_button.grid(row=1, column=1)
window.mainloop()
I tried using .config to specify the location for the text but that doesn't work.

Use the place() geometry manager to place widgets at specific coordinates.
Instead of:
text_1.goto(x=400, y=150)
Try...
text_1.place(x=400, y=150)
And remove:
text_1.grid(row=0, column=0, columnspan=2)
since you should only use one geometry manager method (pack, grid, or place) on a given widget.

Tkinter LabelFrame not expanding in both directions when using grid()

So I'm trying to expand my LabelFrame named "Admin Frame" in the X and Y directions somewhat like the pack() system's fill=BOTH argument but it doesn't seem to be working. But I want to be able to do this with the grid()system because I have a complex interface.
This is my code for the LabelFrame:
from tkinter import *
from tkinter import ttk
root = Tk()
root.title("Election App Mockup")
root.geometry("800x600")
root.resizable(0,0)
frameStyle = ttk.Style().configure("my.TLabelframe.Label")
adminFrame = ttk.LabelFrame(root, text="Admin Panel", style="my.TLabelframe")
adminWinLabel = ttk.Label(adminFrame, text="Welcome Admin")
voterOpBtn = ttk.Button(adminFrame, text="Configure Voters' List", style="my.TButton")
candidateOpBtn = ttk.Button(adminFrame, text="Configure Candidates' List", style="my.TButton")
setVoteSessionBtn = ttk.Button(adminFrame, text="Setup Voting Session", style="my.TButton")
startVoterSessionBtn = ttk.Button(adminFrame, text="Start a Voting Session", style="my.TButton", padding=(25,3,25,3))
adminSettingBtn = ttk.Button(adminFrame, text="Admin Settings", style="my.TButton", )
adminLogoutBtn = ttk.Button(adminFrame, text="Logout", style="my.TButton", padding=(20,3,20,3))
adminWinLabel.grid(row=0, column=0, columnspan=2, pady=(170,5), padx=(150,0))
voterOpBtn.grid(row=1, column=0, padx=(150,5), pady=(10,10), ipadx=15)
candidateOpBtn.grid(row=1, column=1, padx=(10,5), pady=(10,10))
setVoteSessionBtn.grid(row=2, column=0, padx=(150,5), pady=(10,10), ipadx=15)
startVoterSessionBtn.grid(row=2, column=1, padx=(10,5), pady=(10,10))
adminSettingBtn.grid(row=3, column=0, padx=(130,0), pady=(10,10), columnspan=2)
adminLogoutBtn.grid(row=4, column=0, padx=(130,0), pady=(10,10), columnspan=2)
adminFrame.grid(row=0, column=0, sticky=NSEW)
adminFrame.grid_rowconfigure(0, weight=1)
adminFrame.grid_columnconfigure(0, weight=1)
root.mainloop()
I've tried adding extra arguments like ipadx and ipady in but it doesn't work:
adminFrame.grid(row=0, column=0, sticky=NSEW, ipadx=200, ipady=20)
Adding a padding argument in the adminFrame does work but it is very tricky to work with just to expand the frame to the window's full length and breadth.
Thanks in advance! Oh and do note that I did not learn object oriented programming in python, so I won't understand any answers using the class system.

So I'm trying to expand my LabelFrame named "Admin Frame" in the X and Y directions somewhat like the pack() system's fill=BOTH argument but it doesn't seem to be working.
As a rule of thumb, any time you use grid to manage widgets, you should give at least one row and one column a weight greater than zero. You are putting adminFrame in the root window with grid, but you haven't given any rows or columns in the root window a weight.
So, if you want adminFrame to expand to fill the window, you need to give a weight of 1 to row 0 and column 0. The other thing that needs to be done -- that you are already doing -- is to set the sticky attribute so that the frame "sticks" to all four sides of the space allocated to it.
adminFrame.grid(row=0, column=0, sticky=NSEW)
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)

Look at this:
from tkinter import *
from tkinter import ttk
root = Tk()
root.title("Election App Mockup")
root.geometry("800x600")
# root.resizable(False, False)
frameStyle = ttk.Style().configure("my.TLabelframe.Label")
adminFrame = ttk.LabelFrame(root, text="Admin Panel", style="my.TLabelframe")
adminWinLabel = ttk.Label(adminFrame, text="Welcome Admin")
# A frame for the centre 4 buttons
centre_buttons_frame = Frame(adminFrame)
voterOpBtn = ttk.Button(centre_buttons_frame, text="Configure Voters' List", style="my.TButton")
candidateOpBtn = ttk.Button(centre_buttons_frame, text="Configure Candidates' List", style="my.TButton")
setVoteSessionBtn = ttk.Button(centre_buttons_frame, text="Setup Voting Session", style="my.TButton")
startVoterSessionBtn = ttk.Button(centre_buttons_frame, text="Start a Voting Session", style="my.TButton", padding=(25,3,25,3))
adminSettingBtn = ttk.Button(adminFrame, text="Admin Settings", style="my.TButton", )
adminLogoutBtn = ttk.Button(adminFrame, text="Logout", style="my.TButton", padding=(20,3,20,3))
# I think the buttons looks better when they have an equal size so I added
# sticky="ew" to expand them in the horizontal direction.
voterOpBtn.grid(row=0, column=0, sticky="ew", padx=(0,15), pady=10, ipadx=15)
candidateOpBtn.grid(row=0, column=1, sticky="ew", padx=(15,0), pady=10)
setVoteSessionBtn.grid(row=1, column=0, sticky="ew", padx=(0,15), pady=10, ipadx=15)
startVoterSessionBtn.grid(row=1, column=1, sticky="ew", padx=(15,0), pady=10)
adminWinLabel.grid(row=1, column=1, pady=(0,5))
centre_buttons_frame.grid(row=2, column=1)
adminSettingBtn.grid(row=3, column=1, pady=10)
adminLogoutBtn.grid(row=4, column=1, pady=(10,0))
# `adminFrame` is packed in the root so it can expand. There should be a way
# to make it work with .grid, but .pack is easier in this case
adminFrame.pack(fill="both", expand=True)
# Expand the 0th and 6th row - there are no widgets
adminFrame.grid_rowconfigure((0, 6), weight=1)
adminFrame.grid_columnconfigure((0, 3), weight=1)
root.mainloop()
It looks like this on my computer:
I added a frame for the centre 4 buttons so that I can avoid columnspan. Also I used adminFrame.pack(fill="both", expand=True) because it is easier than using .grid_propagate(False) and manually setting the width and height of the frame.
Right now, the GUI should look good with any window size.

Adding a header line to a scrollable canvas with weights

I'm trying get a list of .xlsm files from a folder, and generate a scrollable canvas from which the tabs needed for import can be selected manually using the check buttons (all having the same tab format e.g. tab1, tab2, tab3, tab4).
The major issue I'm having is getting weights to work correctly for the headers in relation to their canvas columns, as longer file names distorts the weight.
I've tried playing with the weights and can't seem to figure out a workaround. I also attempted using treeview as an alternative but this seems to introduce far bigger issues with using checkbuttons. Would it possible to freeze the top row if the headers were placed inside the canvas itself, or could I implement something like a bind so that the header frames individual columns align with the width of the columns of the canvas frame?
import os
import tkinter as tk
from tkinter import filedialog
from tkinter import ttk
class MainFrame:
def __init__(self, master):
master.geometry('1000x200')
self.master_tab = ttk.Notebook(master)
self.master_tab.grid(row=0, column=0, sticky='nsew')
# Sub-Classes
self.file_select = FileSelect(self.master_tab, main=self)
class FileSelect:
def __init__(self, master, main):
self.main = main
# ================== Primary Frame ==================
self.primary_frame = tk.Frame(master)
self.primary_frame.grid(row=0, column=0, sticky='NSEW')
master.add(self.primary_frame, text='Import Selection')
self.primary_frame.columnconfigure(0, weight=1)
self.primary_frame.rowconfigure(1, weight=1)
# ================== File Selection Frame ==================
self.selection_frame = tk.Frame(self.primary_frame)
self.selection_frame.grid(row=0, column=0, sticky='EW')
# Button - Select Directory
self.fp_button = tk.Button(self.selection_frame, text='Open:', command=self.directory_path)
self.fp_button.grid(row=0, column=0, sticky='W')
# Label - Display Directory
self.fp_text = tk.StringVar(value='Select Import Directory')
self.fp_label = tk.Label(self.selection_frame, textvariable=self.fp_text, anchor='w')
self.fp_label.grid(row=0, column=1, sticky='W')
# ================== Canvas Frame ==================
self.canvas_frame = tk.Frame(self.primary_frame)
self.canvas_frame.grid(row=1, column=0, sticky='NSEW')
self.canvas_frame.rowconfigure(1, weight=1)
# Canvas Header Labels
for header_name, x in zip(['File Name', 'Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'], range(5)):
tk.Label(self.canvas_frame, text=header_name, anchor='w').grid(row=0, column=x, sticky='EW')
self.canvas_frame.columnconfigure(x, weight=1)
# Scroll Canvas
self.canvas = tk.Canvas(self.canvas_frame, bg='#BDCDFF')
self.canvas.grid(row=1, column=0, columnspan=5, sticky='NSEW')
self.canvas.bind('<Configure>', self.frame_width)
# Scrollbar
self.scroll_y = tk.Scrollbar(self.canvas_frame, orient="vertical", command=self.canvas.yview)
self.scroll_y.grid(row=1, column=5, sticky='NS')
# Canvas Sub-Frame
self.canvas_sub_frame = tk.Frame(self.canvas)
for x in range(5):
self.canvas_sub_frame.columnconfigure(x, weight=1)
self.canvas_frame_window = self.canvas.create_window(0, 0, anchor='nw', window=self.canvas_sub_frame)
self.canvas_sub_frame.bind('<Configure>', self.config_frame)
def config_frame(self, event):
self.canvas.configure(scrollregion=self.canvas.bbox('all'), yscrollcommand=self.scroll_y.set)
def frame_width(self, event):
canvas_width = event.width
event.widget.itemconfigure(self.canvas_frame_window, width=canvas_width)
def directory_path(self):
try:
# Select file path
directory = filedialog.askdirectory(initialdir='/', title='Select a directory')
self.fp_text.set(str(directory))
os.chdir(directory)
# Updates GUI with .xlsm file list & checkboxes
if len(os.listdir(directory)) != 0:
y = -1
for tb in os.listdir(directory):
if not tb.endswith('.xlsm'):
print(str(tb) + ' does not have ;.xlsm file extension')
else:
y += 1
file_name = tk.Label(self.canvas_sub_frame, text=tb, anchor='w', bg='#96ADF3')
file_name.grid(row=y, column=0, sticky='EW')
for x in range(4):
tb_period = tk.Checkbutton(self.canvas_sub_frame, anchor='w', bg='#C2D0F9')
tb_period.grid(row=y, column=x+1, sticky='EW')
else:
print('No files in directory')
# Filepath error handling exception
except os.error:
print('OS ERROR')
if __name__ == '__main__':
root = tk.Tk()
root.rowconfigure(0, weight=1)
root.columnconfigure(0, weight=1)
MainFrame(root)
root.mainloop()

The simplest solution is to use two canvases, and then set up a binding so that whenever the size of the inner frame changes, you update the headers to match the columns.
It might look something like this:
def config_frame(self, event):
self.canvas.configure(scrollregion=self.canvas.bbox('all'), yscrollcommand=self.scroll_y.set)
self.canvas.after_idle(self.reset_headers)
def reset_headers(self):
for column in range(self.canvas_sub_frame.grid_size()[0]):
bbox = self.canvas_sub_frame.grid_bbox(column, 0)
self.canvas_frame.columnconfigure(column, minsize = bbox[2])

Using tkinter grid

I am fairly new to using .grid in tkinter and was wondering how I could get the l2 variable to be right under the l1 variable. When the code is run the 2nd label is too far down (even have to resize window). I would like to be able to place it in a specific place (below l1) but I'm not sure how to.
Thank you.
Example:
Welcome
Please log-in to continue
Gap's a little big there as well.
Current code:
from tkinter import *
from tkinter.ttk import *
root = Tk()
root.geometry("1300x720")
myImage = PhotoImage(file='ssf.png')
label = Label(image=myImage)
label.grid(row=0)
label.image = myImage
l1 = Label(root, text="Welcome", font="Arial 100 bold", anchor="e").grid(row=0, column=1)
l2 = Label(root, text="Please log-in to continue.", font="Arial 30 bold", anchor="e").grid(row=10, column=1)
Preview of how it looks

Well, you can use the Frame widget to put the text in it like this:
from tkinter import *
from tkinter.ttk import *
root = Tk()
root.geometry("1300x720")
myImage = PhotoImage(file='ssf.png')
label = Label(image=myImage)
label.grid(row=0)
label.image = myImage
labelFrame = Frame(root)
labelFrame.grid(row=0,column=1)
l1 = Label(labelFrame, text="Welcome", font="Arial 100 bold", anchor="e")
l1.grid(row=0, column=0)
l2 = Label(labelFrame, text="Please log-in to continue.", font="Arial 30 bold", anchor="e")
l2.grid(row=1, column=0)
The Frame widget is in row 0, column 1 and contains 'l1' and 'l2'.

Pls see my comments in the revised code below.
I would recommend drawing out the grid system on paper to visualise
your layout and compare it with what is created by your program.
Activating the background color of the widgets such as frame and
label will help you visualize your creation.
Recommend reading these references.
http://www.tkdocs.com/tutorial/grid.html
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/layout-mgt.html
Happy coding. :)
#from tkinter import *
#from tkinter.ttk import *
## I suggest you abbreviate the imported modules to help you keep track of which
## module methods/functions you are using. See below. To be consistent, we will
## use ttk widgets where possible.
# Load tkinter for python 3
import tkinter as tk
import tkinter.ttk as ttk
root = tk.Tk()
root.geometry("1300x720")
# Customise style of ttk widgets
# I have added this to help you visualise the grid system.
s=ttk.Style()
s.configure('frame1.TFrame', background='pink')
s.configure('l0.TLabel', background='blue')
s.configure('l1.TLabel', background='green')
s.configure('l2.TLabel', background='brown')
# Create a frame inside root to contain all the widgets.
# The frame contains a 2x2 grid.
frame1 = ttk.Frame(root, style='frame1.TFrame', borderwidth=20, relief=tk.SUNKEN )
frame1.grid(row=0, column=0, rowspan=2, columnspan=2, sticky='nsew')
# Load Image
# Added tk in fromt of PhotoImage.
myImage = tk.PhotoImage(file='ssf.png')
# Create a ttk.label to contain image
## I added ttk in front of Label. If not, it will mean you will use tk.Label instead of ttk.Label.
## Also I added frame1 as the 1st option to the ttk.Label to mean the ttk.Label
## is inside frame1.
## The "in_=frame1" option is added to grid to mean l0 is grid inside frame1 grid system.
l0 = ttk.Label(frame1, image=myImage, width=500)
l0.grid(in_=frame1, row=0, column=0, sticky='nsew')
#label.image = myImage
# Create a ttk.Label to contain l1
l1 = ttk.Label(frame1, text="Welcome", style='l1.TLabel', font="Arial 100 bold", anchor=tk.E)
l1.grid(in_=frame1, row=0, column=1)
#l1 = Label(root, text="Welcome", font="Arial 100 bold", anchor="e").grid(row=0, column=1)
# Create a ttk.Label to contain l2
l2 = ttk.Label(frame1, text="Please log-in to continue.", style='l2.TLabel', font="Arial 30 bold")
l2.grid(in_=frame1, row=1, column=1)
#l2 = Label(root, text="Please log-in to continue.", font="Arial 30 bold", anchor="e").grid(row=10, column=1)
# These configuration settings will let the grid columns and rows scale according
# to the changing size of the Window i.e. root.
root.rowconfigure(0, weight=1)
root.columnconfigure(0, weight=1)
frame1.rowconfigure(0, weight=1)
frame1.columnconfigure(1, weight=1)