▶️ Watch Entire Tkinter Playlist ✅ Subscribe To My UA-cam Channel: bit.ly/2UFLKgj bit.ly/2IGzvOR ▶️ See More At: ✅ Join My Facebook Group: Codemy.com bit.ly/2GFmOBz ▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt! Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN ▶️ Get The Code bit.ly/3fLFQ8p
i dont know how i can say this, by you made me a code, now i write logical pogrames, but all i learnt this from you just for free, thank you sir!!!!!!!!!!!!!!!!!!!!!!!😊😊
I'm trying to create a GUI for my Python program, I chose to use tkinter, without knowing it is so counter intuitive, hard to understand and bad documented. Your videos are being very helpful, you are a life saver
no one will ever know how much i appreciate this gentleman for all the knowledge he shared in this one youtube channel for a "reasonable" prices, and the vibes, i love it. but now you know...
Changed the for loop buttons to text labels and changed colour to match canvas that way hiding them and only display the necessary widgets - works great : thanks !!
I see no answers anywhere on youtube for this and not much on google for what i want to do with a scale widget, all i know is it involves event.delta /120 , i'd be interested to know if you found out the best way to make it work, I like this channel but think its abit too advanced for a free tutorial , i want to bind it to the scale widget as a zoom feature for an image viewer
@@Rodrigo-me6nq Thanks g, just putting it here too in case anyone else doesn't see in the future: If anyone wants to use the mouse wheel to scroll, place this code after binding the canvas and scroll bar: def _on_mouse_wheel(event): my_canvas.yview_scroll(-1 * int((event.delta / 120)), "units") my_canvas.bind_all("", _on_mouse_wheel) You can lower the 120 to increase scroll speed.
You are the best teacher John! I recently bought your entire Codemy course, and I'm loving it. I have a question though, and I haven't been able to find an answer anywhere. I have managed to add a scrollbar to my app. However since a new scrollable background is a frame, that means all labels and text will have an ugly gray outline around them. I can't change that, as I'm using an image as a background. On the other hand, Canvas allows us to use images as background. Is there a way to make Canvas itself scrollable? And if so, how to make the background image stretch downwards? I hope that my question is clear. Thanks!!
Hey there! when I add the scroll bar using this method to my project, I put all my stuff into the Second Frame as you said, but it was left aligned and when I used another screen that was bigger than 1080p, I noticed the misalignment difference. Also instead of scrolling down, this scrollbar for some reason scrolls up when I try to scroll down. Definitely its something that I am doing wrong, but can't figure out what.
Thanks for the exhaustive explanation. I noticed, though, that if you resize (shrink) the window horizontally the scrollbar disappears. Any idea on how to avoid this? Thanks.
I have a situation that is quite specific, and I am trying to find a solution for it. My window is not scrollable straight away, but rather it is meant to get so during the execution of the application, as more widgets are added to the scrollable frame. When the application opens with too few widgets for it to be scrollable, the scrollbar appears inactive, but if I click the up arrow, it does go up to a blank part of the window. As the frame gets populated with widgets, the scrollbar does not get activated, and the down arrow remains inactive, thereby rendering an only upwards scrollable window, where "up" is blank. The same situation occurs if, in the buttons example you have provided, for example only 3 buttons are instantiated. If you have any idea for how to fix this please let me know, as I fail to comprehend how exactly to google this situation.
is your canvas in separate window or the main frame appears in a window with other widgets that are placed using grid system? I had the same issue so i transferred the whole scroll situation onto a new separate window. Still i have to resize the window once so that the scroll becomes active . will update if i find any other solutions.... ;)
hi sir its really nice to see your tuterials and your smile make evrey thing is easy to do , ive question how can i make an auto scroll txt let say that we hat txt stream and data keep flow how can i fouces to see the last line while update ... thx
It works, and I get the parts. Yet, there's something I don't quite understand about this. I couldn't implement it in sort of a free form way, I had to follow pretty close. I guess there's a chance I just tripped on something syntactic somewhere, or something like that. You're right, though, it's a little bit convoluted. I get a lot of none types, which I think means I'm not passing things quite correctly. Arguments and events have to be in order in terms of how the functions are defined in tkinter - I don't exactly want to learn all of python, but I appreciate that those things are generally accessible when I need them.
amazing tutorial, it all works in my project. however, is there a way to have the scrolll bar not soo far right of the screen, i would like to have it closer to my widgets. again amazing tutorial thankyou! :)
Hello John, Thank you so much for the video. It was very very helpful. However, I have a quick question if you don't mind taking some time to answer it. So after adding the second frame to the window in the canvas and executing the code, you get the result what you have shown. I currently have multiple treeview widgets bound to root window frames which stretch in the horizontal direction upon maximizing the root window to fill the screen. However, when I try adding canvas the way you did and binding these treeview widgets to the second frame, these widgets do not expand anymore when I maximize the root window. Could you please help me on this issue?
Thank you so much John, it was really useful. My scrollbar functions but my frame's information is cut off as it isn't wide enough, how can I make it to be seen completely?
Ok in theory, then the true point about it, it's to include frame within and make them fit the size of the window and keep update stuff added within this canvas, so you stop just before things go wild but useful. ty anyway, nice video.
Hi John, I really enjoy your videos, you have a knack for explaining things very clearly. I have used this method to create a scrollable frame within a program I'm working on. I have written code that adds (and removes) widgets dynamically when an add or remove button is pressed however, when the list of widgets extends beyond the edge of the bottom of the frame, the scrollbar doesn't update and you can't reach the obscured widgets. I hope I've explained myself clearly, do you know a fix for this issue?
Why would you have widgets extending beyond the edge of the bottom of the frame? If you want them to be scrollable, they have to be in the frame that scrolls...
@@Codemycom Hi John, Thanks very much for your quick reply, I have managed to find a fix. I might not have explained very well, I'm still quite new to coding. I wanted the 'box' to stay the same size relative to other objects that surround it in the UI. As the objects being added to the bottom the frame which contains them will expand but the 'box' that the user sees the item in doesn't update so that the added items are 'scrollable' I managed to find a fix on Stack Overflow if anyone has a similar problem to me: stackoverflow.com/questions/47008899/tkinter-dynamic-scrollbar-for-a-dynamic-gui-not-updating-with-gui The issue was that I had written the scrollable frame as a class and only updated once in the __init__ function. I needed to update the scrollable region after each new item was added or removed.
Hello sir, I have problem, i am working on my college project and my project have different menus, one of them should have a scrolling window, following your video, the content i put in that frame which you mentioned sticks to left side of the window. How do place it in the center? Btw great video❤
Hello Sir, I tried this code and it worked. However, when I apply it to the code I have written few days ago, I wasn't able to get it to work. My code has some frames in it and those frames have some labels and images. So I changed placed the frames into the second frame. Doing this however does not work Does using place instead of pack and grid for the frames I have affect the result. Just some additional information, I use place because I find relx, rely, relwidth, and relheight very useful in layouting a program. Any help will be appreciated
The next step for this is to make it work with zooming images and especially have the scrollbars vanish if the image fits well enough on the screen (which avoids flickering).
* @Codemy.com My Problem is solved using tkinter themes. I have* a made a customized scrollbar by editing ttk style. thank you. > Check this code on GitHub *github.com/ChAffanAli/Custom-ScrollBar-in-Tkinter-Python*
Hi , it is great video.. I would like to know how we can make scrollbar in entire window using grid layout. I tried to use same method , But I could not get same like pack method. Can you suggest any steps same as pack method.. Thanks in advance
The video is great. I have followed your video and make a scroll bar. But the issue is scroll bar doesn't work with mouse scroll button. Instead I have to scroll up and down by mouse click. Am I making some mistake?
Great video, everything worked perfectly! I am using images for each of my buttons to make them look a bit more customized, but when scrolling they become a little distorted and smear a bit. Does anyone have any solutions to this?
I successfully created a scrollbar for my program, but before adding the scrollbar i was using the .pack(fill=tk.X) to make my widgets expand horizontally once i added the scrollbar my widgets no longer expand to the size of the frame. Any ideas on how to fix this issue.
I have another question that to maximize the window I am using window = Tk() window.state('zoomed') But issue is the scroll bar. When the window opens there is no scroll bar but when I click the maximize button in top right corner then the scroll bar appears and also works fine. I think there would be the issue of focus. I need to give focus to the scroll bar but I don't know how can give it. If I remove the zoomed state then scroll bar also works fine but I need to maximize it to full screen with top and task bar present. That is why I am using state zoom. Please help me in this regard. Thank you
I have 1 little problem with this code. When I create list of widgets on all window and there is a little widgets - so basically they do not need scrolling, its still scrolling. So I have 3 label widgets that I want present as list scrolling over the empty screen down and up. Is there a way to avoid it? Make it scroll ONLY if it's exceed the screen damention?
I followed this steps, and okay the scrollbar works fine but the second frame does not take the full width of the canvas, how to make the second frame fit the full width of the canvas?
I used this scrollbar and it works well, except that the scrollbar always orients itself at the bottom of the screen. Is there a way to have the scrollbar always start at the top of the screen?
t tave app that will show data from API url calls. The app is 2 side by side frames. Left frame is details to run the api calls and the right frame (output frame) has the canvas displayed. I'm assuming my next step is to add the label for displaying the result and then scroll the canvas?? I don't have to create a new frame??
Is there a way to make the scrollbar dynamically update? I'm using the frame to output data from a button click, and I have it so it is printing labels on the button press, but it is always one less click than I have done, unless I manually change the window size. Anyways, thanks for the videos. Because of them, in two weeks I've gone from knowing literally nothing about python, to building my own GUI to automate my home laboratory equipment.
Yeah that wasn't the best explanation. Basically I have a button click that send a command to a power supply. I used your code to create an output window with a scroll bar. When I click the button n Number of times, the output window will only display n-1 commands. It'll display the last command only when I manually expand the app window. Hope that was more clear
this way has the problems. idk how to refresh all this widgetes or scrollbar when I add new button in the second_frame. by the button in the bottom for ex. i want to add new buttoms but scrollbar doesn't refresh.
also if there are little widgetes in the frame u can scroll it to the top and to the bottom. looks ugly. if u have answer to my first problem, please, comment it.
Thank you for such a great tutorial, I completely appreciate your effort to make this easier for everyone to understand, but each time I try to execute the commands I write, it throws me an error which tells me that .grid is not supposed to be used here as the grid we created is controlling such function, how do I resolve this problem?
@@insertx2k_dev No, you didn't follow or you wouldn't be getting errors. You can use both as long as they are in different parents...so only under certain circumstances that you don't understand.
@@Codemycom I am pretty sure that I understand most of the video, and yes, the compiler I use is Visual Studio Code, and I am running Microsoft Windows 10 64-bit, could this problem be a compiler one?
Hi, how can i make the buttons appear in the centre of the window rather than the left-hand side (without using grid)? Should you make the frame or canvas appear in the centre rather than the left? If so, how?
thank you for the great video any ideas what should i do to make it add new buttons at run time ? i tried to do this but its not working i expect it to add one more button when i click any keyboard button def onKeyPress(event): global second_frame print("key clicked") Button(second_frame, text='test').grid(row=10, column=0, pady=10, padx=10)
Love your style... Suggestion: if you do the whole coding in python interpreter directly, and show the effect of the code at same time, it would be much easier to understand.
You shouldn't do code in the python interpreter. 1. Tkinter doesn't always work there and 2. you would never do that in a professional setting, so why do it ever? 3. It would be way more confusing in every way.
yes the code worked perfectley but the second frame is not the size of the canvas and thats why i am not able to label text in the right side, any way ?
Sir i tried in your code in my project. but scroolbar area is not upadting for the widget added at the runtime. but if i resize the window it gets updated. can you sugest a way to update the scrollbar area every time the new widget is added
Sir, one question: Since there is no Canvas in the ttk module, how can I make the style of Canvas (from tk) the same as the one I set in ttk? Thank you!
Hello, I followed your code and successfully employed it in my project. However, I have one question, I modified the window size a bit as I am using the buttons as the .place method. However, I am having a hard time creating rectangles using create_rectangle now as they are always behind the new window that is being created. Can you help me with how can I create a rectangle that will be over this window?
@@Codemycom Here's the way to use place method. from tkinter import * from tkinter import ttk root = Tk() root.title('Learn To Code at Codemy.com') Height=600 Width=625 Sizeofwin=f"{Width}x{Height}" root.geometry(Sizeofwin) SizeofCanvas = 3100 # You can add y of every widget to get this value # Create A Main Frame main_frame = Frame(root) main_frame.pack(fill=BOTH,expand=1) # Add A Scrollbar To The Canvas my_scrollbar = ttk.Scrollbar(main_frame, orient=VERTICAL) my_scrollbar.pack(side=RIGHT,fill=Y) # Create A Canvas my_canvas = Canvas(main_frame,yscrollcommand=my_scrollbar.set) my_canvas.pack(expand=True,fill=BOTH) # Configure The Scrollbar my_scrollbar.config(command=my_canvas.yview) # Configure The Canvas my_canvas.bind('', lambda e: my_canvas.configure(scrollregion = my_canvas.bbox("all"))) def _on_mouse_wheel(event): my_canvas.yview_scroll(-1 * int((event.delta / 120)), "units") my_canvas.bind_all("", _on_mouse_wheel) # Create ANOTHER Frame INSIDE the Canvas frame = Frame(my_canvas) frame.pack(expand=True,fill=BOTH) # Add that New frame To a Window In The Canvas my_canvas.create_window((0,0), window=frame, anchor="nw") posY=0 for thing in range(101): posY = posY + 30 Button(frame, text=f'Button {thing} Yo!').place(x=50,y=posY) # Adding the real size of canvas frame.configure(width=Width,height=SizeofCanvas) root.mainloop()
![[UA] NAVI vs MOUZ | BO5 | IEM Rio 2024](http://i.ytimg.com/vi/CMBYk0cbGoA/mqdefault.jpg)
▶️ Watch Entire Tkinter Playlist ✅ Subscribe To My UA-cam Channel:
bit.ly/2UFLKgj bit.ly/2IGzvOR
▶️ See More At: ✅ Join My Facebook Group:
Codemy.com bit.ly/2GFmOBz
▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt!
Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN
▶️ Get The Code
bit.ly/3fLFQ8p
Sir can we replace button with label here?
Sir i am not able to get the scroll bar even after writing the same code
Thanks..
@@aafiyamemon9535 I got the scroll bar .
@@codeKeshav Woah can u provide me that code plz...
Love the videos! You are always so happy and positive while teaching. Can’t thank you enough!
You are so welcome!
Your videos are amazing
Don't stop posting it
even though you don't have a lot views
There is people that appreciate your work.
Thank You
Thank you, I will
@@Codemycom YAY
🙂@@Budgie27-v8i
I really appreciate all of the videos on using Tkinter. Really, I use it for different projects and love being able to come back to these videos
Great to hear!
Thanks!! It's sad your channel isn't that popular, you're the best youtube python teacher I've found
Wow, thanks!
same!
agree
i dont know how i can say this, by you made me a code, now i write logical pogrames, but all i learnt this from you just for free, thank you sir!!!!!!!!!!!!!!!!!!!!!!!😊😊
*coder*
Welcome!@@cyberbashir5416
SO HELPFUL thank you so much!! spent days looking for an explanation as to how this works and youve pretty much cleared it up for me.. i'll be back!!
Glad you enjoyed it!
If you dont want to type copy this
class scrolbar:
def _on_mouse_wheel(self,event):
self.canvas.yview_scroll(-1 * int((event.delta / 120)), "units")
def __init__(self,Master,bg="orange red"):
self.master = Master
self.bg = bg
self.canvas = Canvas(self.master,bg=self.bg)
self.canvas.pack(side=LEFT,fill=BOTH,expand=TRUE)
self.scroller = ttk.Scrollbar(self.master,orient=VERTICAL,command=self.canvas.yview)
self.scroller.pack(side=RIGHT,fill=Y)
self.canvas.configure(yscrollcommand=self.scroller.set)
self.canvas.bind('',lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all")))
self.frame = Frame(self.canvas,bg=self.bg,padx=10,pady=10)
self.canvas.create_window((0,0),window=self.frame,anchor=NW)
self.frame.bind_all("", self._on_mouse_wheel)
Great tutorial.
I searched this guide from long time.
Many thanks for all the videos about Tkinter .
You are an excellent teacher
You're very welcome!
I'm trying to create a GUI for my Python program, I chose to use tkinter, without knowing it is so counter intuitive, hard to understand and bad documented. Your videos are being very helpful, you are a life saver
Happy to hear it!
no one will ever know how much i appreciate this gentleman for all the knowledge he shared in this one youtube channel for a "reasonable" prices, and the vibes, i love it.
but now you know...
Changed the for loop buttons to text labels and changed colour to match canvas that way hiding them and only display the necessary widgets - works great : thanks !!
Damn. Two hours looking at stackoverflow questions couldn't do what 10 minutes watching your video did to help me make this work. Thanks!!!
Happy to help!
How can i make the scroll bar configured to the mouse scroll ?
I see no answers anywhere on youtube for this and not much on google for what i want to do with a scale widget, all i know is it involves event.delta /120 , i'd be interested to know if you found out the best way to make it work, I like this channel but think its abit too advanced for a free tutorial , i want to bind it to the scale widget as a zoom feature for an image viewer
@@Dale90ART Check Momo's comment below. It worked well for me
@@Rodrigo-me6nq Thanks g, just putting it here too in case anyone else doesn't see in the future:
If anyone wants to use the mouse wheel to scroll, place this code after binding the canvas and scroll bar:
def _on_mouse_wheel(event):
my_canvas.yview_scroll(-1 * int((event.delta / 120)), "units")
my_canvas.bind_all("", _on_mouse_wheel)
You can lower the 120 to increase scroll speed.
@@Momo-bb2fn thank you so much :)
@@frozenmolasses5932 you’re very welcome :)
You are the best teacher John! I recently bought your entire Codemy course, and I'm loving it. I have a question though, and I haven't been able to find an answer anywhere. I have managed to add a scrollbar to my app. However since a new scrollable background is a frame, that means all labels and text will have an ugly gray outline around them. I can't change that, as I'm using an image as a background. On the other hand, Canvas allows us to use images as background. Is there a way to make Canvas itself scrollable? And if so, how to make the background image stretch downwards? I hope that my question is clear. Thanks!!
sent you a message
I created scrollbar, it was slightly wrong, I rewatched video and now that's perfect, thank you so much
happy to help!
So great videos about Python and tkinter! Short and comprehensive, right on point! I like your style, thumbs up 👍💪
Thanks!
This is exactly what I needed right now. Great tutorial!
Glad it helped!
Hey there! when I add the scroll bar using this method to my project, I put all my stuff into the Second Frame as you said, but it was left aligned and when I used another screen that was bigger than 1080p, I noticed the misalignment difference.
Also instead of scrolling down, this scrollbar for some reason scrolls up when I try to scroll down.
Definitely its something that I am doing wrong, but can't figure out what.
The left alignment happens to me too
Sir please make a video on Treeview widget.
I am in 9th grade and I learnt a lot from you. Thanks.
I plan on doing that soon
Thanks for the exhaustive explanation.
I noticed, though, that if you resize (shrink) the window horizontally the scrollbar disappears.
Any idea on how to avoid this?
Thanks.
Thank you so much!! I'm however struggling to add both vertical and horizontal scrollbar at the same time. How to do that?
I have videos on that in the playlist
I can't thank you enough. Within one week of watching your videos, I was able to make very useful programs. Thanks John!!
Great to hear!
I have a situation that is quite specific, and I am trying to find a solution for it. My window is not scrollable straight away, but rather it is meant to get so during the execution of the application, as more widgets are added to the scrollable frame. When the application opens with too few widgets for it to be scrollable, the scrollbar appears inactive, but if I click the up arrow, it does go up to a blank part of the window. As the frame gets populated with widgets, the scrollbar does not get activated, and the down arrow remains inactive, thereby rendering an only upwards scrollable window, where "up" is blank. The same situation occurs if, in the buttons example you have provided, for example only 3 buttons are instantiated. If you have any idea for how to fix this please let me know, as I fail to comprehend how exactly to google this situation.
is your canvas in separate window or the main frame appears in a window with other widgets that are placed using grid system? I had the same issue so i transferred the whole scroll situation onto a new separate window. Still i have to resize the window once so that the scroll becomes active .
will update if i find any other solutions.... ;)
me three
solution! Every time you add a widget, do root.update_idletasks() then my_canvas.configure(scrollregion = self.my_canvas.bbox('all'))
@@frozenmolasses5932 self isn't defined for me... I'm assuming this isn't something built in and is actually a variable you've named?
@@frozenmolasses5932 thanks that helped
hi sir its really nice to see your tuterials and your smile make evrey thing is easy to do , ive question
how can i make an auto scroll txt let say that we hat txt stream and data keep flow how can i fouces to see the last line while update ... thx
It works, and I get the parts. Yet, there's something I don't quite understand about this. I couldn't implement it in sort of a free form way, I had to follow pretty close. I guess there's a chance I just tripped on something syntactic somewhere, or something like that. You're right, though, it's a little bit convoluted.
I get a lot of none types, which I think means I'm not passing things quite correctly. Arguments and events have to be in order in terms of how the functions are defined in tkinter - I don't exactly want to learn all of python, but I appreciate that those things are generally accessible when I need them.
It gets easier with practice.
amazing tutorial, it all works in my project. however, is there a way to have the scrolll bar not soo far right of the screen, i would like to have it closer to my widgets. again amazing tutorial thankyou! :)
Hello John,
Thank you so much for the video. It was very very helpful. However, I have a quick question if you don't mind taking some time to answer it. So after adding the second frame to the window in the canvas and executing the code, you get the result what you have shown. I currently have multiple treeview widgets bound to root window frames which stretch in the horizontal direction upon maximizing the root window to fill the screen. However, when I try adding canvas the way you did and binding these treeview widgets to the second frame, these widgets do not expand anymore when I maximize the root window. Could you please help me on this issue?
Excellent very helpful video for those struggling to get scrolling to work. Thank-you.
welcome!
I've learned a lot from you John, i wish i could thank you enough
Thanks for watching!
You make the best vodeos! You every time help me so mutch!! THANKS!! Keep going.
Glad you like them! Tell your friends ;-)
thank you so much. been looking for this over youtube.
glad you liked it!
Thank you so much John, it was really useful. My scrollbar functions but my frame's information is cut off as it isn't wide enough, how can I make it to be seen completely?
Make a horizontal scrollbar
@@Codemycom thanks man, I made that And also added the width command to the canvas!
Ok in theory, then the true point about it, it's to include frame within and make them fit the size of the window and keep update stuff added within this canvas, so you stop just before things go wild but useful. ty anyway, nice video.
I love you! OMG this video was VERY USEFUL! THANK YOU SO MUCH!!!
Glad it helped!
Hi John,
I really enjoy your videos, you have a knack for explaining things very clearly.
I have used this method to create a scrollable frame within a program I'm working on. I have written code that adds (and removes) widgets dynamically when an add or remove button is pressed however, when the list of widgets extends beyond the edge of the bottom of the frame, the scrollbar doesn't update and you can't reach the obscured widgets.
I hope I've explained myself clearly, do you know a fix for this issue?
Why would you have widgets extending beyond the edge of the bottom of the frame? If you want them to be scrollable, they have to be in the frame that scrolls...
@@Codemycom Hi John,
Thanks very much for your quick reply, I have managed to find a fix.
I might not have explained very well, I'm still quite new to coding. I wanted the 'box' to stay the same size relative to other objects that surround it in the UI. As the objects being added to the bottom the frame which contains them will expand but the 'box' that the user sees the item in doesn't update so that the added items are 'scrollable'
I managed to find a fix on Stack Overflow if anyone has a similar problem to me:
stackoverflow.com/questions/47008899/tkinter-dynamic-scrollbar-for-a-dynamic-gui-not-updating-with-gui
The issue was that I had written the scrollable frame as a class and only updated once in the __init__ function.
I needed to update the scrollable region after each new item was added or removed.
Hello sir,
I have problem, i am working on my college project and my project have different menus, one of them should have a scrolling window, following your video, the content i put in that frame which you mentioned sticks to left side of the window. How do place it in the center? Btw great video❤
Man you did me a huge favor with this
Happy to help!
This was what I was looking for. Thank you!
Glad I could help!
Subscribed! Just what I needed. Thank you.
Glad to hear it!
INTERESTING!!, FIRST ATTEMPT ON Wednesday, done successfully, Thank you for this nice Tutorial John
Nice
WOW!!! It really helped me a lot. I solved the problem that was not solved. [from: a Korean]
Nice
video, great, how do you make numbers like the one that accompanies expand=1 look purple in sublime?
It does it automatically by default. Just save the file as a .py file
Muchas gracias por tu esfuerzo, espero algún día encontrar videos de tanta ayuda en mi idioma.
How could I put the scrollbar using place() option cause all my rest widgets have been placed using that
class ScrollableFrame:
"""
# How to use class
from tkinter import *
obj = ScrollableFrame(master,height=300 # Total required height of canvas,width=400 # Total width of master)
objframe = obj.frame
# use objframe as the main window to make widget
"""
def __init__ (self,master,width,height,mousescroll=0):
self.mousescroll = mousescroll
self.master = master
self.height = height
self.width = width
self.main_frame = Frame(self.master)
self.main_frame.pack(fill=BOTH,expand=1)
self.scrollbar = Scrollbar(self.main_frame, orient=VERTICAL)
self.scrollbar.pack(side=RIGHT,fill=Y)
self.canvas = Canvas(self.main_frame,yscrollcommand=self.scrollbar.set)
self.canvas.pack(expand=True,fill=BOTH)
self.scrollbar.config(command=self.canvas.yview)
self.canvas.bind('', lambda e: self.canvas.configure(scrollregion = self.canvas.bbox("all")))
self.frame = Frame(self.canvas,width=self.width,height=self.height)
self.frame.pack(expand=True,fill=BOTH)
self.canvas.create_window((0,0), window=self.frame, anchor="nw")
self.frame.bind("", self.entered)
self.frame.bind("", self.left)
def _on_mouse_wheel(self,event):
self.canvas.yview_scroll(-1 * int((event.delta / 120)), "units")
def entered(self,event):
if self.mousescroll:
self.canvas.bind_all("", self._on_mouse_wheel)
def left(self,event):
if self.mousescroll:
self.canvas.unbind_all("")
you. are. a. LIFESAVER! i cant thank you enough for this video
srsly, why cant this be easier?
Welcome! And it is pretty easy when you know how...
This man is so great. I always wanted to make my own software and now im doing so. Thank you!
Very happy to hear it!
Hello Sir, I tried this code and it worked. However, when I apply it to the code I have written few days ago, I wasn't able to get it to work.
My code has some frames in it and those frames have some labels and images. So I changed placed the frames into the second frame. Doing this however does not work Does using place instead of pack and grid for the frames I have affect the result. Just some additional information, I use place because I find relx, rely, relwidth, and relheight very useful in layouting a program.
Any help will be appreciated
"It is kind of tricky. " I had the same feeling.
Haha Yep!
Wow.. amazing it worked to me finally..
but how can i scroll up and down only by the mouse without selecting and moving the scrollbar itsself?
The next step for this is to make it work with zooming images and especially have the scrollbars vanish if the image fits well enough on the screen (which avoids flickering).
sure
Custom Scrollbar means a manually designed scrollbar like in VS code Scrollbar is in black colour
You can google tkinter themes but I'm not sure that is the solution.
* @Codemy.com My Problem is solved using tkinter themes. I have* a made a customized scrollbar by editing ttk style. thank you.
> Check this code on GitHub
*github.com/ChAffanAli/Custom-ScrollBar-in-Tkinter-Python*
Thank you very much for this video, it's just what I needed !
Happy to hear it!
I owe you a beer at least, your videos are the best!
Thanks!
Hi , it is great video.. I would like to know how we can make scrollbar in entire window using grid layout. I tried to use same method , But I could not get same like pack method. Can you suggest any steps same as pack method.. Thanks in advance
It's the same as the pack method. No difference.
My friend, the code worked perfectly for my case! Thank you soooo much!
Awesome!
The video is great. I have followed your video and make a scroll bar. But the issue is scroll bar doesn't work with mouse scroll button. Instead I have to scroll up and down by mouse click. Am I making some mistake?
Yes, it works fine for me with the mouse scroll wheel.
Great video, everything worked perfectly!
I am using images for each of my buttons to make them look a bit more customized, but when scrolling they become a little distorted and smear a bit. Does anyone have any solutions to this?
It's just the frame updating, it has to run a loop every time. Try to use smaller res images, lighter file formats or SVGs
Hey John,
Can we add a horizontal & vertical scrollbar within the same canvas as-well ?
yes
@@Codemycom Thanks, can you help me with that if possible ? like If I use the same code as instructed by you in the video how can that be done ?
@@Hex-Scholar I have videos on using horizontal scrollbars.
@@Codemycom Thanks Sir, I’ll look for them 👍🏻
Is there a way to expand the inner frame to fill canvas width? I tried packing inner frame with fill x and expand 1 but it doesn't work
I successfully created a scrollbar for my program, but before adding the scrollbar i was using the .pack(fill=tk.X) to make my widgets expand horizontally once i added the scrollbar my widgets no longer expand to the size of the frame. Any ideas on how to fix this issue.
I have the same problem :(
Great video, teacher!
Thanks!
I have another question that to maximize the window I am using
window = Tk()
window.state('zoomed')
But issue is the scroll bar. When the window opens there is no scroll bar but when I click the maximize button in top right corner then the scroll bar appears and also works fine. I think there would be the issue of focus. I need to give focus to the scroll bar but I don't know how can give it. If I remove the zoomed state then scroll bar also works fine but I need to maximize it to full screen with top and task bar present. That is why I am using state zoom. Please help me in this regard. Thank you
I have 1 little problem with this code. When I create list of widgets on all window and there is a little widgets - so basically they do not need scrolling, its still scrolling. So I have 3 label widgets that I want present as list scrolling over the empty screen down and up. Is there a way to avoid it? Make it scroll ONLY if it's exceed the screen damention?
Sir, how about adding colors to scroll bars?? And also changing their relief?
You need to use ttk styling and create a theme for it then apply that to the scrollbar.
I followed this steps, and okay the scrollbar works fine but the second frame does not take the full width of the canvas, how to make the second frame fit the full width of the canvas?
Thank you. I learned a lot on your tutorials.
Glad to hear that!
This was very helpful, thanks!
Thank you !
Now it's clear to my mind
Most welcome
Smash that like button guys n gals! its free! great python tkinter tutorial, Codemy. Thanks
Excellent, thank you very much!
Welcome!
I used this scrollbar and it works well, except that the scrollbar always orients itself at the bottom of the screen. Is there a way to have the scrollbar always start at the top of the screen?
You deserve all the best!
thanks
t tave app that will show data from API url calls. The app is 2 side by side frames. Left frame is details to run the api calls and the right frame (output frame) has the canvas displayed. I'm assuming my next step is to add the label for displaying the result and then scroll the canvas?? I don't have to create a new frame??
Is there a way to make the scrollbar dynamically update? I'm using the frame to output data from a button click, and I have it so it is printing labels on the button press, but it is always one less click than I have done, unless I manually change the window size.
Anyways, thanks for the videos. Because of them, in two weeks I've gone from knowing literally nothing about python, to building my own GUI to automate my home laboratory equipment.
not sure what you mean…but congrats on your progress! that’s great to hear!
Yeah that wasn't the best explanation. Basically I have a button click that send a command to a power supply. I used your code to create an output window with a scroll bar. When I click the button n Number of times, the output window will only display n-1 commands. It'll display the last command only when I manually expand the app window. Hope that was more clear
Sir,how to relatively change the origin x,y of a canvas after being scrolled??i'm stucked in a problem
Hi John, same code i tried for 2000 box it didnt capture all the boxes when i scrolled down, can u pls help on that. Thanks..
Awesome ! It added life to my program. ☺️
Nice!
Thanks. this solved my problem :)
Welcome
Can I add stuff like labels etc to that? I have been trying to apply this code to my programm but it doesnt display anything.
I did all these instructions, and it is working. But when I delete some widgets, the scrollbar does not resize automatically.... how can I do it?
this way has the problems. idk how to refresh all this widgetes or scrollbar when I add new button in the second_frame. by the button in the bottom for ex. i want to add new buttoms but scrollbar doesn't refresh.
also if there are little widgetes in the frame u can scroll it to the top and to the bottom. looks ugly. if u have answer to my first problem, please, comment it.
I love your videos!
Thanks!
Thank you for such a great tutorial, I completely appreciate your effort to make this easier for everyone to understand, but each time I try to execute the commands I write, it throws me an error which tells me that .grid is not supposed to be used here as the grid we created is controlling such function, how do I resolve this problem?
Are you using both grid and pack? You can only use one or the other in any parent
@@Codemycom I just followed what you do in the video, and it seems like you used both.
@@insertx2k_dev No, you didn't follow or you wouldn't be getting errors. You can use both as long as they are in different parents...so only under certain circumstances that you don't understand.
@@Codemycom I am pretty sure that I understand most of the video, and yes, the compiler I use is Visual Studio Code, and I am running Microsoft Windows 10 64-bit, could this problem be a compiler one?
@@insertx2k_dev No...it's exactly what I said it was. You can't use grid and pack in the same parent ever.
Amazing video. Thank you!
This was a nice tutorial....YO!!
Thanks!
Hi, how can i make the buttons appear in the centre of the window rather than the left-hand side (without using grid)? Should you make the frame or canvas appear in the centre rather than the left? If so, how?
Figured it out, >> my_canvas.create_window((X,0),window = self.second_frame, anchor = "nw"), just increase X
Thanks John, much appreciated!
You're welcome!
thank you so much, finally a good explain for that.
Glad it helped!
In same code if we set the range upto 1000 in for loop then the buttons display till 711 button only is there any solution for this?
Hi! I was wondering, if we add a new widget during run-time, woul the scrollbar adjust to be able to scroll all the way down to that new widget?
give it a try and see :-p
thank you for the great video any ideas what should i do to make it add new buttons at run time ? i tried to do this but its not working i expect it to add one more button when i click any keyboard button
def onKeyPress(event):
global second_frame
print("key clicked")
Button(second_frame, text='test').grid(row=10, column=0, pady=10, padx=10)
root.bind('', onKeyPress)
root.mainloop()
You haven't packed or gridded the second frame.
Love your style... Suggestion: if you do the whole coding in python interpreter directly, and show the effect of the code at same time, it would be much easier to understand.
You shouldn't do code in the python interpreter. 1. Tkinter doesn't always work there and 2. you would never do that in a professional setting, so why do it ever? 3. It would be way more confusing in every way.
yes the code worked perfectley but the second frame is not the size of the canvas and thats why i am not able to label text in the right side, any way ?
Well done, this helped me a lot
Glad it helped!
Sir i tried in your code in my project.
but scroolbar area is not upadting for the widget added at the runtime.
but if i resize the window it gets updated.
can you sugest a way to update the scrollbar area every time the new widget is added
Sir, one question: Since there is no Canvas in the ttk module, how can I make the style of Canvas (from tk) the same as the one I set in ttk?
Thank you!
Okay, problem solved, but still thank you! It is really a nice tutorial.
stackoverflow.com/questions/27892994/get-default-background-of-ttk-frame
sure
Very Interactive video and teaching 😍😍
Glad you liked it
Thanks! Really helpfull :D
Glad it helped!
Hello, I followed your code and successfully employed it in my project. However, I have one question, I modified the window size a bit as I am using the buttons as the .place method. However, I am having a hard time creating rectangles using create_rectangle now as they are always behind the new window that is being created. Can you help me with how can I create a rectangle that will be over this window?
Sorry, I don't have any videos on place method
@@Codemycom
Here's the way to use place method.
from tkinter import *
from tkinter import ttk
root = Tk()
root.title('Learn To Code at Codemy.com')
Height=600
Width=625
Sizeofwin=f"{Width}x{Height}"
root.geometry(Sizeofwin)
SizeofCanvas = 3100 # You can add y of every widget to get this value
# Create A Main Frame
main_frame = Frame(root)
main_frame.pack(fill=BOTH,expand=1)
# Add A Scrollbar To The Canvas
my_scrollbar = ttk.Scrollbar(main_frame, orient=VERTICAL)
my_scrollbar.pack(side=RIGHT,fill=Y)
# Create A Canvas
my_canvas = Canvas(main_frame,yscrollcommand=my_scrollbar.set)
my_canvas.pack(expand=True,fill=BOTH)
# Configure The Scrollbar
my_scrollbar.config(command=my_canvas.yview)
# Configure The Canvas
my_canvas.bind('', lambda e: my_canvas.configure(scrollregion = my_canvas.bbox("all")))
def _on_mouse_wheel(event):
my_canvas.yview_scroll(-1 * int((event.delta / 120)), "units")
my_canvas.bind_all("", _on_mouse_wheel)
# Create ANOTHER Frame INSIDE the Canvas
frame = Frame(my_canvas)
frame.pack(expand=True,fill=BOTH)
# Add that New frame To a Window In The Canvas
my_canvas.create_window((0,0), window=frame, anchor="nw")
posY=0
for thing in range(101):
posY = posY + 30
Button(frame, text=f'Button {thing} Yo!').place(x=50,y=posY)
# Adding the real size of canvas
frame.configure(width=Width,height=SizeofCanvas)
root.mainloop()
You can create a frame anywhere of the root having any height width and pass frame inplace of root it will work well with that also.