Is it possible to let the window auto-size to fit all widgets without overlaps?

[matix2k]

First of all, I absolutely love it! Kudos!

About my question:
I want to avoid defining a fixed geometry but rather let the app auto-size to fit all widgets.
Background is that defining fixed width&height may look good when testing on screen A with resolution 3840x2160 with scale 200% but when opening on screen B with different resolution and scale leads to certain widgets pushed together or not shown at all.

This happens when not defining the geometry. Certain widgets are not shown. The default geometry seems to be a square, not adapting its size based on its widgets.

What I imagine is something like that - basically auto-size the window to fit all widgets:

Thanks in advance!
Tim

[TomSchimansky]

Hi, it's possible if you use the grid geometry manager instead of place or pack. I don't know if you use grid already, but when you set the weights of the cells and the sticky options of the widgets properly, the widgets adapt to the window size automatically. I created a small example with the grid manager in the wiki here: https://github.com/TomSchimansky/CustomTkinter/wiki/App-structure-and-layout#small-onefile-example-app-with-grid

(I would recommend to always use the grid geometry manager)

[mustangCAR]

IT'S THE CUSTOMTKINTER GUY!

[mustangCAR]

I'M A BIG FAN!

[matix2k]

Thanks for the fast reply.
Yes, I use "grid" to place the widgets (on the grid). But using self.geometry(widthxheight) would mean that I define fixed dimensions which I try to avoid.

Here is the code of the example from above:

How would I need to adjust it so that all widgets are shown and not truncated resp hidden.

from tkinter import *
import customtkinter as ctk

class TestApp(ctk.CTk):
    def __init__(self):
        super().__init__()
        
        # self.geometry("500x300")
        # self.minsize(300,200)
        self.protocol("WM_DELETE_WINDOW", self.on_closing)

        label1 = ctk.CTkLabel(self, text="testttttttttt", text_font=("Arial", 20))
        label1.grid(row=1, column=1, padx=20, pady=(20,0), sticky="nswe")
        label2 = ctk.CTkLabel(self, text="testtt", text_font=("Arial", 20))
        label2.grid(row=1, column=2, padx=20, pady=(20,0), sticky="nswe")
        label3 = ctk.CTkLabel(self, text="testtttttttttttt", text_font=("Arial", 20))
        label3.grid(row=1, column=3, padx=20, pady=(20,0), sticky="nswe")
        label4 = ctk.CTkLabel(self, text="test", text_font=("Arial", 20))
        label4.grid(row=1, column=4, padx=20, pady=(20,0), sticky="nswe")
        label1 = ctk.CTkLabel(self, text="test", text_font=("Arial", 20))
        label1.grid(row=2, column=1, padx=20, pady=(20,0), sticky="nswe")
        label2 = ctk.CTkLabel(self, text="test", text_font=("Arial", 20))
        label2.grid(row=2, column=2, padx=20, pady=(20,0), sticky="nswe")
        label3 = ctk.CTkLabel(self, text="testestestesttest", text_font=("Arial", 20))
        label3.grid(row=2, column=4, padx=20, pady=(20,0), sticky="nswe")
        label4 = ctk.CTkLabel(self, text="test", text_font=("Arial", 20))
        label4.grid(row=2, column=6, padx=20, pady=(20,0), sticky="nswe")

        button1 = ctk.CTkButton(self, text="Button tessssssssssst", command=self.destroy)
        button1.grid(row=1, column=5)

    def on_closing(self, event=0):
        self.destroy

if __name__ == "__main__":
    app = TestApp()
    app.mainloop()

[TomSchimansky]

You need to set the weight of the grid cells. By default all the cells have a weight of 0 so they will not expand or shrink together, they will be fixed size:

        self.grid_rowconfigure((1, 2), weight=1)
        self.grid_columnconfigure((1, 2, 3, 4, 5, 6), weight=1)

Also not that the grid indexing begins at 0 and not at 1, but here it doesn't matter.

[ChanaGoldstein]

Can you please explain what the first parameter is in the self.grid_rowconfigure() or self.grid_columnconfigure() function?
If the row is (1,2), and the column is (1,2,3,4,5,6), does this mean I'm creating a grid like this:

What does it mean if the value is just one number and not a tuple?
Why do we need a tuple and it's not enough to just write the number of rows and the number of columns we want?

How would I create a configuration like this? I want all the widgets to expand if I make the main window bigger.

Thanks!

[jklouz]

Not sure its good approach but at least not bad to try:

class MainApp:
    def __init__(self, root):
        self.root = root
        self.root.title("Tables")
        self.root.geometry(f"{600}x{150}")

        # table's row and column 1
        self.frame1 = ctk.CTkFrame(root)
        self.frame1.grid(row=0)
        self.frame1.columnconfigure(0, weight=2)

        self.label1 = ctk.CTkLabel(self.frame1, text="label1", width=300)
        self.label1.grid(row=0,column=0, padx=(10,10))
        self.label2 = ctk.CTkLabel(self.frame1, text="label2", width=300)
        self.label2.grid(row=0,column=1, padx=(10,10))

        # table's row and column 2
        self.frame2 = ctk.CTkFrame(root)
        self.frame2.grid(row=1, sticky='nsew')
        self.frame2.columnconfigure(0, weight=2)

        self.subframe1 = ctk.CTkFrame(self.frame2)
        self.subframe1.grid(row=0, column=0, sticky='nsew')
        self.subframe1.rowconfigure(0, weight=3)

        self.subframe2 = ctk.CTkFrame(self.frame2)
        self.subframe2.grid(row=0, column=1, sticky='nsew')
        self.subframe2.rowconfigure(0, weight=1)

        self.label3 = ctk.CTkLabel(self.subframe1, text="label3", width=300)
        self.label3.grid(row=0,column=0, padx=(10,10))
        self.label4 = ctk.CTkLabel(self.subframe1, text="label4", width=300)
        self.label4.grid(row=1,column=0, padx=(10,10))
        self.label5 = ctk.CTkLabel(self.subframe1, text="label5", width=300)
        self.label5.grid(row=2,column=0, padx=(10,10))
        
        self.label6 = ctk.CTkLabel(self.subframe2, text="label6", width=300)
        self.label6.grid(row=0,column=0, padx=(10,10))

        # table's row and column 3        
        self.frame3 = ctk.CTkFrame(root)
        self.frame3.grid(row=2, sticky='nsew')
        self.frame3.columnconfigure(0, weight=1)
        
        self.label7 = ctk.CTkLabel(self.frame3, text="label7", width=300)
        self.label7.grid(row=0,column=0, padx=(10,10))
        
if __name__ == "__main__":
    root = ctk.CTk()
    app = MainApp(root)
    root.mainloop()

[matix2k]

Thanks, this was helpful.
Is there also a way to make sure that a widget (e.g. a label) auto-sizes based on its content without having to manually define a width resp. height parameter.

This is how it looks: the text of two labels is truncated

Also, how to get rid of the extra space (blue)

I would imagine something like this --> no blank space, all widgets visible and their respective content shown full size, not pushed together/truncated

from tkinter import *
import customtkinter as ctk

class TestApp(ctk.CTk):
    def __init__(self):
        super().__init__()
        
        self.grid_rowconfigure((0), weight=1)
        self.grid_columnconfigure((0, 1, 2, 3, 4), weight=1)

        label1 = ctk.CTkLabel(self, text="testttttttttt", text_font=("Arial", 20))
        label1.grid(row=0, column=0, padx=20, pady=(20,0))
        label2 = ctk.CTkLabel(self, text="testtt", text_font=("Arial", 20))
        label2.grid(row=0, column=1, padx=20, pady=(20,0))
        label3 = ctk.CTkLabel(self, text="testtttttttttttt", text_font=("Arial", 20))
        label3.grid(row=0, column=2, padx=20, pady=(20,0))
        label4 = ctk.CTkLabel(self, text="test", text_font=("Arial", 20))
        label4.grid(row=0, column=3, padx=20, pady=(20,0))

        button1 = ctk.CTkButton(self, text="Button tessssssssssst", command=self.destroy)
        button1.grid(row=0, column=4, padx=20, pady=(20,0))

if __name__ == "__main__":
    app = TestApp()
    app.mainloop()

[kelltom]

Try using this line after each label declaration. Apologies if the formatting is messed up, I’m on mobile at the moment.

self.my_label.bind('<Configure>', lambda e: self.my_label.configure(wraplength=self.my_label.winfo_width()-20))

Tinker with the ‘20’ value to adjust the cutoff.

[TomSchimansky]

The CTkLabels are resizing automatically, you can see it if you define a fg_color. But the text is not automatically wrapping to more lines. If you want this, you need to use a CTkTextBox, but this is not fully completed yet. And here are tutorials on how to properly set up a grid system:
https://www.pythontutorial.net/tkinter/tkinter-grid/
https://www.geeksforgeeks.org/python-grid-method-in-tkinter/