1

I'm making an app in python, with the customtkinter library. I'm using the grid() widget manager. So far, I only have a few frames as the basic layout, but can't align them properly.

The issue is, that I want the blue frame (stats_frame), to be twice the size of the white and black frames underneath it (control_frame and current_result_frame).

How it looks like:

https://i.sstatic.net/9VUQRAKN.png

This is the code:

import customtkinter as ctk

class Neural_Net_GUI():

    def __init__(self):

        # Defining the window:
        self.window = ctk.CTk()
        self.window.geometry('1200x800')
        self.window.columnconfigure(0, weight=3)
        self.window.columnconfigure(1, weight=1)

        self.window.rowconfigure(0, weight=1)
        self.window.rowconfigure(1, weight=10)

        # self.window.rowconfigure((2, 3, 4), weight=1)
        # self.window.rowconfigure(1, weight=1)
        # self.window.rowconfigure((2, 3), weight=1)

        # Sample frames:

        self.input_frame = ctk.CTkFrame(master=self.window, fg_color='green')
        self.input_frame.grid(row=0, column=0, columnspan=2, sticky='swne')

        self.graph_frame = ctk.CTkFrame(master=self.window, fg_color='red')
        self.graph_frame.grid(row=1, column=0, sticky='swne')

        self.left_frame = ctk.CTkFrame(master=self.window)
        self.left_frame.columnconfigure(0, weight=1)

        # self.left_frame.rowconfigure(0, weight=1)
        self.left_frame.rowconfigure(0, weight=10)
        self.left_frame.rowconfigure(1, weight=1)
        self.left_frame.rowconfigure(2, weight=1)

        self.stats_frame = ctk.CTkFrame(master=self.left_frame, fg_color='blue')
        self.stats_frame.grid(row=0, column=0, sticky='nesw')

        self.control_frame = ctk.CTkFrame(master=self.left_frame, fg_color='black')
        self.control_frame.grid(row=1, column=0, sticky='nesw')

        self.current_result_frame = ctk.CTkFrame(master=self.left_frame, fg_color='white')
        self.current_result_frame.grid(row=2, column=0, sticky='nesw')

        self.left_frame.grid(row=1, column=1, sticky='swne')

N = Neural_Net_GUI()

N.window.mainloop()

I tried to adjust the weight of the row, have more rows and increase the rowspan of the frame, but nothing worked.

Does anyone please know how to fix this?

Improve this question

2 Answers 2

Reset to default
1

From the official document: "The -weight option (an integer value) sets the relative weight for apportioning any extra spaces among rows." It is not guaranteed. You need to set the uniform option to achieve your requirement:

# set uniform option to same value for the related rows
self.left_frame.rowconfigure(0, weight=2, uniform='a')  # changed weight to 2
self.left_frame.rowconfigure(1, weight=1, uniform='a')
self.left_frame.rowconfigure(2, weight=1, uniform='a')

Result:

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much, I had a feeling it would be something simple like this!
0

Your row and column configurations work properly for tkinter. customtkinter sets the width and height options of CTkFrame.

This affects the layout of your window. If we set these options for all frames to the same values, for example width=0, height=0, then the window will look as it is intended.

import customtkinter as ctk


class Neural_Net_GUI():

    def __init__(self):

        # Defining the window:
        self.window = ctk.CTk()
        self.window.geometry('1200x800')
        self.window.columnconfigure(0, weight=3)
        self.window.columnconfigure(1, weight=1)

        self.window.rowconfigure(0, weight=1)
        self.window.rowconfigure(1, weight=10)

        # Sample frames:

        self.input_frame = ctk.CTkFrame(master=self.window, fg_color='green', width=0, height=0)
        self.input_frame.grid(row=0, column=0, columnspan=2, sticky='swne')

        self.graph_frame = ctk.CTkFrame(master=self.window, fg_color='red', width=0, height=0)
        self.graph_frame.grid(row=1, column=0, sticky='swne')

        self.left_frame = ctk.CTkFrame(master=self.window, width=0, height=0)
        self.left_frame.columnconfigure(0, weight=1)

        self.left_frame.rowconfigure(0, weight=2)
        self.left_frame.rowconfigure(1, weight=1)
        self.left_frame.rowconfigure(2, weight=1)


        self.stats_frame = ctk.CTkFrame(master=self.left_frame, fg_color='blue', width=0, height=0)
        self.stats_frame.grid(row=0, column=0, sticky='nesw')

        self.control_frame = ctk.CTkFrame(master=self.left_frame, fg_color='black', width=0, height=0)
        self.control_frame.grid(row=1, column=0, sticky='nesw')

        self.current_result_frame = ctk.CTkFrame(master=self.left_frame, fg_color='white', width=0, height=0)
        self.current_result_frame.grid(row=2, column=0, sticky='nesw')

        self.left_frame.grid(row=1, column=1, sticky='swne')


N = Neural_Net_GUI()

N.window.mainloop()
Improve this answer

2 Comments

This also works, and it even opens new ways for me to play around with the layout, thanks a lot for your effort!
@AdamBrestovansky In tkinter, the initial width and height of a frame are 0 and 0. If you set a small width and height for the frame, it will not be noticeable in the window. Because the root window width and height (geometry) are much larger than the combined width of the frames in all columns and the combined height of the frames in all rows. The width and height of CTkFrame are 200 and 200. The frames try to maintain their size, and the grid geometry manager tries to resize them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.