How can I create a resizeable window with resizeable widgets smartly in tkinter?

Question

So I am using tkinter to make my program and after much hassle, I have got some resizeable stuff to work, this is a snippet of what I've used:

CR = tk.Checkbutton(self, text="Creativity", variable=CRval)
CR.place(relwidth=0.18, relheight=0.05, relx=0.68, rely=0.83, anchor="w")

As you can see below the checkboxes are not in line and when I expand the window it goes further out:

It took me a long time to get them this aligned and really it shouldn't. I like to use .grid() but I can't seem to find a way of using relative distances or setting grid sizes.

The full code for this part of the window is below - notice I had to change the relative sizes of almost everything, every time:

import tkinter as tk

self = tk.Tk()

KLval = tk.BooleanVar()
KL = tk.Checkbutton(self, text="Knots and Lashings", variable=KLval)
KL.place(relwidth=0.2, relheight=0.05, relx=0.03, rely=0.77, anchor="w")
SUval = tk.BooleanVar()
SU = tk.Checkbutton(self, text="Sense of Urgency", variable=SUval)
SU.place(relwidth=0.2, relheight=0.05, relx=0.023, rely=0.83, anchor="w")
FCval = tk.BooleanVar()
FC = tk.Checkbutton(self, text="Fieldcraft", variable=FCval)
FC.place(relwidth=0.15, relheight=0.05, relx=0.015, rely=0.89, anchor="w")
STval = tk.BooleanVar()
ST = tk.Checkbutton(self, text="Stealth", variable=STval)
ST.place(relwidth=0.1, relheight=0.05, relx=0.028, rely=0.95, anchor="w")
PLval = tk.BooleanVar()
PL = tk.Checkbutton(self, text="Planning", variable=PLval)
PL.place(relwidth=0.18, relheight=0.05, relx=0.25, rely=0.77, anchor="w")
RAval = tk.BooleanVar()
RA = tk.Checkbutton(self, text="Radios", variable=RAval)
RA.place(relwidth=0.18, relheight=0.05, relx=0.242, rely=0.83, anchor="w")
COval = tk.BooleanVar()
CO = tk.Checkbutton(self, text="Communication", variable=COval)
CO.place(relwidth=0.18, relheight=0.05, relx=0.28, rely=0.89, anchor="w")
SGval = tk.BooleanVar()
SG = tk.Checkbutton(self, text="Strategy", variable=SGval)
SG.place(relwidth=0.18, relheight=0.05, relx=0.249, rely=0.95, anchor="w")
PSval = tk.BooleanVar()
PS = tk.Checkbutton(self, text="Problem Solving", variable=PSval)
PS.place(relwidth=0.2, relheight=0.05, relx=0.47, rely=0.71, anchor="w")
DEval = tk.BooleanVar()
DE = tk.Checkbutton(self, text="Decoding", variable=DEval)
DE.place(relwidth=0.18, relheight=0.05, relx=0.448, rely=0.77, anchor="w")
FAval = tk.BooleanVar()
FA = tk.Checkbutton(self, text="First Aid", variable=FAval)
FA.place(relwidth=0.18, relheight=0.05, relx=0.444, rely=0.83, anchor="w")
PRval = tk.BooleanVar()
PR = tk.Checkbutton(self, text="Prioritising", variable=PRval)
PR.place(relwidth=0.18, relheight=0.05, relx=0.459, rely=0.89, anchor="w")
DMval = tk.BooleanVar()
DM = tk.Checkbutton(self, text="Decision Making", variable=DMval)
DM.place(relwidth=0.18, relheight=0.05, relx=0.478, rely=0.95, anchor="w")
REval = tk.BooleanVar()
RE = tk.Checkbutton(self, text="Re-Evaluation", variable=REval)
RE.place(relwidth=0.18, relheight=0.05, relx=0.7, rely=0.71, anchor="w")
MCval = tk.BooleanVar()
MC = tk.Checkbutton(self, text="Management and Control", variable=MCval)
MC.place(relwidth=0.3, relheight=0.05, relx=0.686, rely=0.77, anchor="w")
CRval = tk.BooleanVar()
CR = tk.Checkbutton(self, text="Creativity", variable=CRval)
CR.place(relwidth=0.18, relheight=0.05, relx=0.68, rely=0.83, anchor="w")
CKval = tk.BooleanVar()
CK = tk.Checkbutton(self, text="Core Knowledge", variable=CKval)
CK.place(relwidth=0.18, relheight=0.05, relx=0.71, rely=0.89, anchor="w")

self.geometry("650x400+400+50")
self.minsize(650, 400)

self.mainloop()

What kind of layout and resizing behavior would you like to achieve? Because you can make the columns of the grid layout to expand if this is your issue. — j_4321
– j_4321, Commented Dec 19, 2019 at 14:23

Bryan Oakley · Accepted Answer · 2019-12-19 14:54:21Z

The solution is to use grid or pack -- they are specifically designed to create responsive user interfaces. place is very rarely the correct choice if you're at all concerned with responsiveness.

If you're creating a grid (ie: lining things up in rows and columns) grid is the right choice. You can line things up in rows and columns with pack, but it requires some extra work to simulate columns.

Also, given the nature of your specific code, you should seriously consider creating these checkbuttons in a loop and using a data structure for saving references to the widgets and variables. The problem with the code you have here is it's unreadable, hard to maintain, and hard to visualize.

For example, you could save the abbreviation and the label in a set of tuples like this:

options = (
    ("KL", "Knots and Lashings"),
    ("SU", "Sense of Urgency"),
    ("FC", "Fieldcraft"),
    ("ST", "Stealth"),
    ("PL", "Planning"),
    ("RA", "Radios"),
    ("CO", "Communication"),
    ("SG", "Strategy"),
    ("PS", "Problem Solving"),
    ("DE", "Decoding"),
    ("FA", "First Aid"),
    ("PR", "Prioritising"),
    ("DM", "Decision Making"),
    ("RE", "Re-Evaluation"),
    ("MC", "Management and Control"),
    ("CR", "Creativity"),
    ("CK", "Core Knowledge")
)

You can then reference the widgets with the abbreviation. You could either call grid once per widget:

checkbuttons['PS'].grid(row=1, column=2, sticky="w")
checkbuttons['RE'].grid(row=1, column=3, sticky="w")
checkbuttons['KL'].grid(row=2, column=0, sticky="w")
...

Or, use another loop. For example:

layout = (
    (None, None, "PS", "RE"),
    ("KL", "PL", "DE", "MC"),
    ("SU", "RA", "FA", "CR"),
    ("FC", "CO", "PR", "CK"),
    ("ST", "SG", "DM", None),
)

self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure((0,1,2,3), weight=1)

for row, columns in enumerate(layout):
    for column, key in enumerate(columns):
        if key is not None:
            checkbuttons[key].grid(row=row+1, column=column, sticky="w")

The window is now completely responsive. Plus, it's trivial to add more options or to rearrange the order of the options. Here's the original size:

And here's with the window stretched out:

That is much more like I wanted it to look, thanks. I tried to run your code but it didn't work, could you put it in one section so I know I've got all the right parts? Also, from looking at it, the text looks a bit small, is there a way to increase the size of that on expansion or is that quite complicated?

Collectives™ on Stack Overflow

How can I create a resizeable window with resizeable widgets smartly in tkinter?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related