Scrollable Frames!! - Tkinter CustomTkinter 8

In this video I'll show you how to use scrollable frames with CustomTkinter and Python.
In regular Tkinter, you need to add a scrollbar to a frame to make it scrollable, but in CustomTkinter there's a widget that comes with a scrollbar!
So no extra coding! Let's dive into it!
#tkinter #codemy #JohnElder
Timecodes
0:00​​ - Introduction
1:25 - Create Scrollable Frame
2:06 - Add Buttons
3:46 - Change Scrollbar to Horizontal
5:18 - Change Height/Width of Frame
5:43 - Add Frame Label
6:13 - Change Label FG Color
6:41 - Change Label Text Color
7:03 - Change Label Font Size
7:22 - Change Label Text Position
8:28 - Change Frame Border
9:04 - Change Frame Border Color
9:43 - Change Frame FG Color
10:05 - Change Scrollbar FG Color
10:41 - Change Scrollbar Button Color
11:06 - Change Scrollbar Hover Color
11:40 - Change Frame Corner Radius
13:00 - Conclusion

[@TkinterPython]

▶ Watch CustomTkinter Playlist ✅ FREE Tkinter Widget Book bit.ly/45iO4OP bit.ly/3K4qlZC ▶ See More At: ✅ Subscribe To My KZbin Channel: Tkinter.com bit.ly/3Pk1By4 ▶ MASSIVE TKINTER.COM DISCOUNT ✅ Join My Facebook Group: 30% off with coupon code: youtube bit.ly/2GFmOBz ▶ Get The Code For This Video bit.ly/3dCzz2K

[@rachelpiteck]

I just want to say that I love your videos! It got me back into coding for fun. I have really enjoyed using Tkinter for some dnd programs I am doing. I usually use python for physics but it has been way fun getting into tkinter. Thank you for the great tuturials!!!

[@Ev-001]

You are a godsend, I have been fighting with scrollable on TK for weeks, trying all sorts of different things to get it to work. My structure was already prepared for scrollableframe from CTK so simply changing from frame fixed my issue!

[@Codemycom]

Glad you found me then!

[@sulaimonmueezoluwaseun4145]

I am doing self-learning, and I have completed many tasks using your channel. i am looking out for projects and wish to work with experts

[@YusifRefae]

wow, so much better than tkinter. no messing around with multiple frames and using canvas and binding and configuring, etc. I got it to work with Tkinter. Your other video on this is very good btw. I am just doing basic stuff, displaying dataframes as tables in pop out top level windows, etc. But when I wanted to freeze the top row and first column of a table, similar to what you can do in the View tab of MS Excel, things got super complicated. there are just too many moving parts to make real applications in tkinter. so much work for just a scroll bar. it should be way simpler, like in this vid. I will give custom tkinter a go thanks to this nifty video! always super enlightening content. learned a lot about coding from you, thanks!

[@TkinterPython]

Glad you enjoyed it!

[@joelale18]

can i have a scrollable frame with both orientations?

[@SPTutor-l6n]

Hi, thanks for the video! After assigning different text to each button, I'm having trouble using .get or .cget to retrieve the text from the clicked button in the scrollable frame(so the text can be either printed or used in a function) I have OOP code that can do it but I can't reproduce it with functional programming which is the format I need it in. Any help would be greatly appreciated.

[@yuuyaokatani5848]

how to destroy or delete scrollable frame? I'm trying to do frame.destroy() but it doesnt work...

[@OhNanoh]

When scrolling the scrollableframe, my buttons are flickering extremely badly. Is there any way i can fix this?

[@Golden_Hephaestus]

Thank you so much! Is there a function or way to hide/show the scrollbar? It'd be great if I can have the scrollbar show up if only a certain amount of buttons are on screen for example.

[@TkinterPython]

Not that I know of

[@lifeislight913]

Thank you sir❣️

[@TkinterPython]

Welcome!

[@amazing_sport]

I want to scroll frame by mouse wheel. Is it possible? Can you show an example?

[@TkinterPython]

This works with scrollwheel

[@MiguelPerez-pt9cl]

Hi, I have a problem trying to change the height of the CTkScrollableFrame because it does not change it, I have tried several small sizes, which is what I need, and it does not do it, is there any way to force it to a small size like 100 or 50?

[@TkinterPython]

That widget has a height and width attribute. You can set it to whatever size you want when you define it.

[@MiguelPerez-pt9cl]

@@TkinterPython Thanks for the quick response my friend, but I think I discovered that the minimum height is 200 because if I use a height lower than that it doesn't take it

[@bassycounter]

Hi John! I've been trying to get into learning tkinter and customtkinter so I can create a GUI for a project of mine. I've having trouble finding solutions for creating a layout it which I can have widgets side by side, as opposed to stacked on top of each other (for example, a textbox on one side displaying information relevant to the button clicked on from either a combo box or scrollable frame that's next to it). I'm pretty sure it's something farily simple to implement, however I'm not exactly sure how to go about it. If you could do a tutorial on how to do this, it would be much appreciated!

[@TkinterPython]

Yeah, it's super simple...use .grid() instead of .pack() a google search will show you how to use .grid(column=0, row=1) and .grid(column=0, row=2) etc

[@philipanderegg5973]

You have to use the .grid(row=2, column=0) for example. Depending on how you set up your GUI, you can use entity1.grid(row=2, column=0, pady=5) then entity2.grid(row=2, column=1, pady=5) for example, but if you set your GUI up differently where if you put another item in a different column, it looks really weird, due to columnspan configurations, then you can use padding instead and put the entities in the same column but different spot: entity1.grid(row=2, column=0, padx=(0, 200), pady=5) entity2.grid(row=2, column=0, padx=(200, 0), pady=5) Using method 2, you may need to play around with the values in the padx tuple to make it look and be exactly where you want *Note pady=5 isn't necessary but I like to have space between my buttons and things :) Hope this helps!

[@Raining_Needles]

Hello! When I add widgets into my frame, the frame shrinks to wrap around them, how do I make it so it doesn't do this?

[@TkinterPython]

stackoverflow.com/questions/28089942/difference-between-fill-and-expand-options-for-tkinter-pack-method

[@YusifRefae]

how to change the scroll speed of the CTK scrollable frame? it's very slow. I was able to bind it to key up and down and make the speed 200-300 for better response. But failed using MouseWheel to bind it. Still too slow. Looked through CTK documentation and there's no property for controlling to speed or increment of the scroll bar. any thoughts? Am I the only OCD person who's annoyed by the slow scroll on this frame? hahaha. Thanks!

[@TkinterPython]

It works instantly for me. There may be a problem with your computer settings.

[@sachi-gw8lw]

how can we use scrollable frames in a dropdown menu?

[@Krullfath]

I think you need to set the frame master of the dropdown menu to the scrollable one, not sure

[@ve70900]

Is it possible to have both vertical and horizontal bars?

[@philipanderegg5973]

The workaround is to use the .grid and add a vertical Scrollbar using CTkScrollbar, so: my_frame = customtkinter.CTkScrollableFrame(master=root, orientation="horizontal") my_frame.grid(row=1, column=0, pady=10) v_scrollbar = customtkinter.CTkScrollbar(master=root, orientation="vertical", command=my_frame.yview) v_scrollbar.grid(row=1, column=1) my_frame.configure(yscrollcommand=v_scrollbar.set) This seemed to work for me for what I was doing with putting a table into the Scrollable Frame and having it scroll through the table. For me, instead of it scrolling the frame, I had it scroll the table instead.

[@MalharPatil]

@@philipanderegg5973 I tried your method but getting the following error: AttributeError: 'CTkScrollableFrame' object has no attribute 'yview'. Any solutions?