Adding to scrollable frame with place doesn't work.

[YS26908]

I'm using a scrollable frame and adding frames (for rows) to which I add products gives a grid-type look. I don't know if placing isn't compatible with ctkscrollable frame or what but for some reason the rows don't appear properly at all.
Here is the code:

This is how it appears:

As can be seen, the rows are squashed at the top of the menu, I'm not too sure about this but on checking the height of the scrollable menu frame (width as well) the check returns 1. So, I tried to set the height explicitly with products_frame.configure(height=1000) and again it just refused to change and kept returning 1. If anyone has any suggestions or if you want to see anything else for context or more info please lmk. Would appreciate any help.

[dipeshSam]

@YS26908 This happens because the Window frame which is created or placed by canvas requires the grid() or pack() methods to expand its size. While using place() method, the frame does not expand by default. But, we can expand it manually. Here is the sample code:

from customtkinter import(
    CTk, 
    CTkLabel, 
    CTkScrollableFrame
)

import re

def expand_frame(s_frame: CTkScrollableFrame):
    width = height = 0
    for child in s_frame.winfo_children():
        child.update()
        match = re.match(r"(\d+)x(\d+)\+(\d+)\+(\d+)", child.winfo_geometry())
        w, h, x, y = map(int, match.groups())
        width += w + x
        height += h + y

    # Using tcl commands because CustomTkinter does not allow to modify internal frame
    s_frame.tk.call(s_frame, "configure", "-width", width, "-height", height)

        
if __name__ == "__main__":
    app = CTk()
    
    sf = CTkScrollableFrame(app, width=500, height=300)
    sf.pack(fill="both", expand=True, padx=10, pady=10)
    

    lab = CTkLabel(sf, text=f"Label", fg_color="black", corner_radius=10)
    lab.place(x=10, y=10, anchor="nw")


    lab2 = CTkLabel(sf, text=f"Label", fg_color="black", corner_radius=10)
    lab2.place(x=10, y=800, anchor="nw")

    expand_frame(sf)

    app.mainloop()

The subsequent application of grid() or pack() methods to an initially placed frame will result in the frame's dimensions being recalculated based solely on its children's bounding boxes. To retain the original frame size, it is imperative to exclusively utilize the place() method or strategically position (using grid() or pack()) children that can effectively expand the frame to the required dimensions i.e., to make the placed children visible.

I hope this is helpful to you.
Regards.

[dipeshSam]

@FaridAlmaulaui1 Yeah there are several ways to do so. Could you please mention how the frame is being expanded or resized in your specific case? A sample code snippet or any visual attachment would be helpful.

Regards.

[YS26908]

Thanks a lot, Dipesh, now the rows appear as expected, however, I have now encountered another error, on adding the products to the rows again the width and height of the row frame are 1 and 1. Now, the products also appear in the same position. Columns is set to 5 by the way

[dipeshSam]

@YS26908 Could you please elaborate this problem by Sample Reproducible Code? I can't see implementation of other functions your code in the given screenshot.

Although, if .winfo_width() is returning 1, to solve it, use .update() just above your print statements.

Regards.

[FaridAlmaulaui1]

@dipeshSam I apologize for entering this convo and but I felt that my issue is relatable,

anyways I have the following code,

        extended_plot_frame = ctk.CTkFrame(main_frame)
        extended_plot_frame.pack(side='top', fill='both', expand= True,pady=(4,0), padx=4)

        results_frame = ctk.CTkFrame(main_frame, height=80)
        results_frame.pack(side='top',fill='x', pady=4, padx=4)
        
        bottom_frame = ctk.CTkFrame(main_frame)
        bottom_frame.pack(side='top', fill='x', pady=4, padx=4)

this is how it looks,

and I want to put a scrollable frame inside/instead the result frame with a shorter height than the 200px default height of the scrollable frame , using the following code

        extended_plot_frame = ctk.CTkFrame(main_frame)
        extended_plot_frame.pack(side='top', fill='both', expand= True,pady=(4,0), padx=4)

        results_frame = ctk.CTkScrollableFrame(main_frame, height=80)
        results_frame.pack(side='top',fill='x', pady=4, padx=4)
        
        bottom_frame = ctk.CTkFrame(main_frame)
        bottom_frame.pack(side='top', fill='x', pady=4, padx=4)

I get the following, it pushes the bottom frame out of the window (even with extending the window it keeps expanding till it hits 200px)

I tried putting it inside a frame and making the frame height 80px nothing changed , I tried using a grid instead of pack, also nothing

[dipeshSam]

@FaridAlmaulaui1 You are welcome. A simple way to fix this is to use place() geometry manager inside a normal frame setting relative size. Here is the sample implementation of the same:

from customtkinter import (
    CTk,
    CTkFrame,
    CTkButton,
    CTkLabel,
    CTkScrollableFrame
)


class SizedScrollableFrame(CTkFrame):
    def __init__(self, master: CTk, *args, **kwargs):
        super().__init__(master, *args, **kwargs)
        
        self.scrollable_frame = CTkScrollableFrame(self)
        self.scrollable_frame.place(x=0, y=0, anchor="nw", relwidth=1, relheight=1)


if __name__ == "__main__":
    def on_add():
        # To add items to the scrollable frame, we need to get it as an attribute
        # of the object of the `SizedScrollableFrame`, i.e., `result_frame.scrollable_frame`
        for i in range(1, 51):
            CTkLabel(result_frame.scrollable_frame, text=f"{i}. Sample Text").pack(side="top", padx=5, pady=5)
            
        btn.destroy()
            
        
    app = CTk() 

    extended_plot_frame = CTkFrame(app)
    extended_plot_frame.pack(side="top", fill="both", expand=True, padx=10, pady=10)
    
    result_frame = SizedScrollableFrame(app, height=80)
    result_frame.pack(side="top", fill="x", padx=10, pady=10)
    
    bottom_frame = CTkFrame(app)
    bottom_frame.pack(side="top", fill="x", padx=10, pady=10)
    
    
    btn = CTkButton(bottom_frame, text="Run adding test", command=on_add)
    btn.place(relx=0.5, anchor="center", rely=0.5)

    app.mainloop()

Output:

Regards.