tkinter resize GUI on different monitors

Question

I am mainly coding on my MAC. I created a GUI that is used for a tool I am using to automate things with selenium.

I have used .grid for all widgets in my GUI. But when I open the GUI on my Windows laptop at home (same resolution but much smaller monitor panel) it is totally messed up.

Here are two screenshot showing the problem,

Messed up layout on Win Laptop (17,3")

The second screenshot shows how it should look.

This is the code I used for the grid layout:

# General GUI settings
app = Tk()
app.title('trade_buddy')
app.geometry('605x800')
app.minsize(605, 800)
app.maxsize(605, 800)

app.grid_rowconfigure(0, weight=1)
app.grid_rowconfigure(1, weight=1)
app.grid_rowconfigure(2, weight=1)
app.grid_rowconfigure(3, weight=1)
app.grid_rowconfigure(4, weight=1)
app.grid_rowconfigure(5, weight=1)
app.grid_rowconfigure(6, weight=1)
app.grid_rowconfigure(7, weight=1)
app.grid_rowconfigure(8, weight=1)
app.grid_rowconfigure(9, weight=1)
app.grid_rowconfigure(10, weight=1)
app.grid_rowconfigure(11, weight=1)
app.grid_rowconfigure(12, weight=1)
app.grid_rowconfigure(13, weight=1)

#Background label
image = Image.open('v2.0/lolo.png')
image = image.resize((600,450), Image.ANTIALIAS)
copy_of_image = image.copy()
photo = ImageTk.PhotoImage(image)
label = tk.Label(app, image = photo)
label.place(x=0, y=0)

#Buttons
b_init = tk.Button(app,text='Initialize',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10, command=lambda:threading.Thread(target=tb,daemon=True).start())
b_exit = tk.Button(app,text='Exit',font='Tahoma 10 bold',padx=8,bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d', pady=10,command=lambda:threading.Thread(target=exit_tb,daemon=True).start())
b_start = tk.Button(app,text='Start',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10,command=lambda:threading.Thread(target=filters,daemon=True).start())
b_pause = tk.Button(app,text='Pause',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10,command=lambda:threading.Thread(target=stop_tb,daemon=True).start())
b_tfm = tk.Button(app,text='TFM',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10,command=lambda:threading.Thread(target=tfm,daemon=True).start())


#Labels
l_maxBO = tk.Label(app,text='Maximum buy price:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')
l_itemsontf = tk.Label(text='# of items on transfer list:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')
l_speed = tk.Label(text='Choose speed:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10 bold')
l_routine = tk.Label(text='Choose routine:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10 bold')

#Entries
e_maxBO = tk.Entry(app, width=10, bg='#1e1e1f', fg='#f8f09d', font='Tahoma 10')
e_itemsontf = tk.Entry(app, width=10, bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')
e_fixedsellprice = tk.Entry(app, width=10, bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')

#Text box
t_outputbox = tk.Text(app, width=99, height=27, font='Tahoma 10',bg='#2c2c2c', fg='#f8f09d', relief=SUNKEN, highlightthickness="1")


#Grid Layout
l_maxBO.grid(row=0, column=0, sticky='w', padx=5, pady=5)
l_itemsontf.grid(row=1, column=0, sticky='w', padx=5, pady=5)
l_speed.grid(row=3, column=0, sticky='w', padx=5, pady=1, ipady=1)
l_routine.grid(row=7, column=0, sticky='w', padx=5, pady=1, ipady=1)
e_maxBO.grid(row=0, column=1, sticky='w', padx=5, pady=5)
e_itemsontf.grid(row=1, column=1, sticky='w', padx=5, pady=5)
e_fixedsellprice.grid(row=11, column=0, sticky='w', padx=5, pady=3)
b_exit.grid(row=12, column=8, sticky='sw', padx=5, pady=10)
b_init.grid(row=12, column=4, sticky='sw', padx=5, pady=10)
b_start.grid(row=12, column=0, sticky='sw', padx=5, pady=10)
b_pause.grid(row=12, column=1, sticky='sw', padx=5, pady=10)
b_tfm.grid(row=12, column=2, sticky='sw', padx=5, pady=10)
r_normal.grid(row=4, column=0, sticky='w', padx=5, pady=1)
r_fast.grid(row=5, column=0, sticky='w', padx=5, pady=1)
r_slow.grid(row=6, column=0, sticky='w', padx=5, pady=1)
r_buyonly.grid(row=8, column=0, sticky='w', padx=5, pady=1)
r_fullroutine.grid(row=9, column=0, sticky='w', padx=5, pady=1)
r_buysellfixed.grid(row=10, column=0, sticky='w', padx=5, pady=1)
t_outputbox.grid(row=13, column=0, columnspan=13, rowspan=13, sticky='nsew', padx=5, pady=10)

As a coding beginner, I really have no idea what else I could change. I already changed from .place to .grid but the problem is still the same.

Does anyone have an idea how I could setup my GUI that it keeps the minimum required geometry relations no matter on what monitor I work?

Does this answer your question? [How to get tkinter canvas to dynamically resize to window width?](https://stackoverflow.com/questions/22835289/how-to-get-tkinter-canvas-to-dynamically-resize-to-window-width) — Karthik, Sep 08 '20 at 12:28
uff.. well to be honest I have no clue how I could implement my code in that example. I think might not be the solution since it would need to pack my whole GUI into a resizable class like that. Not sure tho — exec85, Sep 08 '20 at 12:33
I'm guessing this is happening because you are mixing widget managements. You grid all the elements, but then place the background image, and the main difference is that the elements are overlapping the background. You probably need the background image size to scale with the window or, if you exclusively want the logo to be to the right of the options and above the buttons, you could grid it in with them as well. If you would like an example of doing any of these things, let us know. — Joel Toutloff, Sep 08 '20 at 14:00
@JoelToutloff I would prefer having the layout as on the second screen, means the logo is free of any overlapping. If you have an example how I could rewrite my code it would be awesome! — exec85, Sep 08 '20 at 14:28

score 0 · Answer 1 · answered Sep 08 '20 at 15:05

Here is an example of forcing it to look like the second picture.

import tkinter as tk
from PIL import ImageTk, Image

# General GUI settings
app = tk.Tk()
app.configure(bg="black")

#Background label
image = Image.open('test.png')
image = image.resize((200,200), Image.ANTIALIAS)
copy_of_image = image.copy()
photo = ImageTk.PhotoImage(image)
label = tk.Label(app, image = photo)
label.grid(row=3, column=1, sticky='w')

#others
r_normal = tk.Radiobutton(app, text="Normal Speed")
r_fast = tk.Radiobutton(app, text="Fast Speed")
r_slow = tk.Radiobutton(app, text="Slow Speed")
r_buyonly = tk.Radiobutton(app, text="Buy only")
r_fullroutine = tk.Radiobutton(app, text="Full routine (optimized price)")
r_buysellfixed = tk.Radiobutton(app, text="Buy and sell for fixed price")

#Buttons
b_init = tk.Button(app,text='Initialize',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10, command=lambda:threading.Thread(target=tb,daemon=True).start())
b_exit = tk.Button(app,text='Exit',font='Tahoma 10 bold',padx=8,bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d', pady=10,command=lambda:threading.Thread(target=exit_tb,daemon=True).start())
b_start = tk.Button(app,text='Start',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10,command=lambda:threading.Thread(target=filters,daemon=True).start())
b_pause = tk.Button(app,text='Pause',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10,command=lambda:threading.Thread(target=stop_tb,daemon=True).start())
b_tfm = tk.Button(app,text='TFM',font='Tahoma 10 bold',bg='#f8f09d',fg='#1e1e1f',activebackground='#1e1e1f',activeforeground='#f8f09d',padx=8, pady=10,command=lambda:threading.Thread(target=tfm,daemon=True).start())


#Labels
l_maxBO = tk.Label(app,text='Maximum buy price:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')
l_itemsontf = tk.Label(text='# of items on transfer list:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')
l_speed = tk.Label(text='Choose speed:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10 bold')
l_routine = tk.Label(text='Choose routine:',bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10 bold')

#Entries
e_maxBO = tk.Entry(app, width=10, bg='#1e1e1f', fg='#f8f09d', font='Tahoma 10')
e_itemsontf = tk.Entry(app, width=10, bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')
e_fixedsellprice = tk.Entry(app, width=10, bg='#1e1e1f', fg='#f8f09d',font='Tahoma 10')

#Text box
t_outputbox = tk.Text(app, width=99, height=27, font='Tahoma 10',bg='#2c2c2c', fg='#f8f09d', relief=tk.SUNKEN, highlightthickness="1")


#Grid Layout
l_maxBO.grid(row=0, column=0, sticky='w', padx=5, pady=5)
l_itemsontf.grid(row=1, column=0, sticky='w', padx=5, pady=5)
l_speed.grid(row=3, column=0, sticky='w', padx=5, pady=1, ipady=1)
l_routine.grid(row=7, column=0, sticky='w', padx=5, pady=1, ipady=1)
e_maxBO.grid(row=0, column=1, sticky='w', padx=5, pady=5)
e_itemsontf.grid(row=1, column=1, sticky='w', padx=5, pady=5)
e_fixedsellprice.grid(row=11, column=0, sticky='w', padx=5, pady=3)
b_exit.grid(row=12, column=8, sticky='sw', padx=5, pady=10)
b_init.grid(row=12, column=4, sticky='sw', padx=5, pady=10)
b_start.grid(row=12, column=0, sticky='sw', padx=5, pady=10)
b_pause.grid(row=12, column=1, sticky='sw', padx=5, pady=10)
b_tfm.grid(row=12, column=2, sticky='sw', padx=5, pady=10)
r_normal.grid(row=4, column=0, sticky='w', padx=5, pady=1)
r_fast.grid(row=5, column=0, sticky='w', padx=5, pady=1)
r_slow.grid(row=6, column=0, sticky='w', padx=5, pady=1)
r_buyonly.grid(row=8, column=0, sticky='w', padx=5, pady=1)
r_fullroutine.grid(row=9, column=0, sticky='w', padx=5, pady=1)
r_buysellfixed.grid(row=10, column=0, sticky='w', padx=5, pady=1)
t_outputbox.grid(row=13, column=0, columnspan=13, rowspan=13, sticky='nsew', padx=5, pady=10)

Notable differences: I had to set a background color to make up for how we are moving that image. The image is no longer using .place and instead using .grid. The image will need to be resized a bit differently because it is a smaller area. I removed all those row_configures because they were removing some rigidity, you can add it back if you like, but you'll have to re-scale your columns to match the new layout.

Let us know if you have any questions etc.

tkinter resize GUI on different monitors

1 Answers1