How to apply a scrollbar in Tkinter GUI? - python

The idea of this python program is to scrape recipes from a food website and output the recipes in a tkinter GUI when clicking the button. I have already applied the scrollbar to the GUI but it is not working as it should. I have already tried many ways but I did not succeed so I decided to ask help from the stack overflow community. I am new to tkinter so sorry for asking help for possibly a silly problem.
The code so far:
import tkinter as tk
from tkinter import Scrollbar
root = tk.Tk()
root.title('Italian-recipes')
height=600
width=895
canvas = tk.Canvas(root, height=height, width=width)
canvas.pack()
background_image = tk.PhotoImage(file='food.png')
background_label = tk.Label(root, image=background_image)
background_label.place(relwidth=1, relheight=1)
lower_frame = tk.Frame(root, bg='#80c1ff', bd=5)
lower_frame.place(relx=0.5, rely=0.25, relwidth=0.75, relheight=0.6, anchor='n')
frame = tk.Frame(root, bg='#AFF9A9', bd=5)
frame.place(relwidth=0.75, relheight=0.1, relx=0.5, rely=0.1, anchor='n')
button = tk.Button(frame, text='Enter food or ingredient', font=40, command=lambda:
test_function(entry.get()))
button.place(relx=0.55, relwidth=0.45, relheight=1)
entry = tk.Entry(frame, font=40)
entry.place(relwidth=0.5, relheight=1)
listbox = tk.Listbox(lower_frame, justify='left', bd=4)
listbox.place(relwidth=1, relheight=1)
label = tk.Label(listbox, anchor='nw', justify='left', bd=4)
label.place(relwidth=1, relheight=1)
scrollbar = Scrollbar(listbox, orient="vertical")
scrollbar.pack( side = 'right', fill = 'y' )
root.mainloop()

I did it with a textfield, that you can see how it work. Change it back to your listbox
import tkinter as tk
from tkinter import Scrollbar
root = tk.Tk()
root.title('Italian-recipes')
height=600
width=895
canvas = tk.Canvas(root, height=height, width=width)
canvas.pack()
lower_frame = tk.Frame(root, bg='#80c1ff', bd=5)
lower_frame.place(relx=0.5, rely=0.25, relwidth=0.75, relheight=0.6, anchor='n')
frame = tk.Frame(root, bg='#AFF9A9', bd=5)
frame.place(relwidth=0.75, relheight=0.1, relx=0.5, rely=0.1, anchor='n')
scrollbar = Scrollbar(lower_frame, orient="vertical")
scrollbar.pack( side = 'right', fill = 'y' )
listbox = tk.Text(lower_frame, yscrollcommand=scrollbar.set, bd=4)
listbox.pack(fill="both", expand="yes")
scrollbar.configure(command=listbox.yview)
root.mainloop()

Related

Why frame border / line appear after click text widget (the frame is inside canvas) tkinter

i've the problem for make an GUI apps with python tkinter.
here is my sample code
import tkinter as tk
from tkinter import ttk
root = tk.Tk()
root.geometry('300x300')
root.title('CSV Editor')
notebook = ttk.Notebook(root)
notebook.pack(pady=10, expand=True)
tab_home = ttk.Frame(notebook, width=300, height=300)
notebook.add(tab_home, text='Home')
fr_home = tk.Frame(tab_home, background="white")
fr_home.grid(row=0, column=0)
fr_home_container_canvas = tk.Frame(fr_home, background="red")
fr_home_container_canvas.grid(row=0, column=0, sticky='nw')
fr_home_container_canvas.grid_rowconfigure(0, weight=1)
fr_home_container_canvas.grid_columnconfigure(0, weight=1)
fr_home_container_canvas.grid_propagate(False)
canvas_home = tk.Canvas(fr_home_container_canvas)
canvas_home.grid(row=0, column=0, sticky="news")
vsb = tk.Scrollbar(fr_home_container_canvas, orient="vertical", command=canvas_home.yview)
vsb.grid(row=0, column=1, sticky='ns')
canvas_home.configure(yscrollcommand=vsb.set)
fr_home_widget_canvas = tk.Frame(canvas_home, background="yellow")
canvas_home.create_window((0, 0), window=fr_home_widget_canvas, anchor='nw')
fr_home_widget_canvas.config(width=300, height=300, padx=10)
fr_home_container_canvas.config(width=300, height=300)
canvas_home.config(scrollregion=canvas_home.bbox("all"))
text_widget = tk.Text(fr_home_widget_canvas, width = 30, height = 10)
text_widget.grid(column=0, row=0)
root.mainloop()
if i run this code, this is the preview
enter image description here
but when i click inside the text widget, in the frame appear line / border like this
enter image description here
What is that line / border? how to remove it?
thank you so much :)
It is the highlight background which can be removed by setting highlightthickness=0:
canvas_home = tk.Canvas(fr_home_container_canvas, highlightthickness=0)

Why can't I set the background of a ttk Frame?

This is my code:
import tkinter as tk
from tkinter import ttk
root = tk.Tk()
root.protocol("WM_DELETE_WINDOW", lambda: on_closing(root, btn))
frame1 = tk.Frame(root, bg=root['background'])
frame1.pack(expand="YES")
canvas = tk.Canvas(frame1, width=200, height=300, relief="sunken", bd=0, bg=root['background'])
scroll_y = tk.Scrollbar(frame1, orient="vertical", command=canvas.yview, bg=canvas['background'])
scroll_y.pack(side="right", fill='y')
canvas.pack(side="top", expand='YES', fill='both')
canvas.configure(yscrollcommand=scroll_y.set)
# canvas.update_idletasks()
# canvas.yview_moveto('1.0')
s = ttk.Style()
s.configure("new.TFrame", background=canvas['background'], width=canvas.winfo_width(), height=canvas.winfo_height())
msgFrame = ttk.Frame(canvas, style="new.TFrame")
msgFrame.bind("<Configure>", lambda e: canvas.configure(scrollregion=canvas.bbox("all")))
canvas.create_window((0, 0), window=msgFrame, anchor="nw")
Why won't the frame change its color? Or its width/height?
If you'd like to put some strings in the frame:
for i in range (50):
lbl = tk.Label(msgFrame, text="example").pack()
First using same background color for all the widgets is hard to see the effect. For debug purpose, use different background colors for different widgets.
Second you cannot set the width and height of a ttk::Frame using style.configure(), specify them in ttk::Frame(...).
Below is an modified example based on your code:
import tkinter as tk
from tkinter import ttk
def on_closing(root):
root.destroy()
root = tk.Tk()
root.geometry("400x400")
root.config(bg="cyan")
root.protocol("WM_DELETE_WINDOW", lambda: on_closing(root))
frame1 = tk.Frame(root, bg="red")
frame1.pack(expand="YES")
canvas = tk.Canvas(frame1, width=200, height=300, relief="sunken", bd=0, bg="green")
scroll_y = tk.Scrollbar(frame1, orient="vertical", command=canvas.yview, bg=canvas['background'])
scroll_y.pack(side="right", fill='y')
canvas.pack(side="top", expand='YES', fill='both')
canvas.configure(yscrollcommand=scroll_y.set)
s = ttk.Style()
s.configure("new.TFrame", background="blue")
msgFrame = ttk.Frame(canvas, style="new.TFrame", width=100, height=200) # set width and height
msgFrame.bind("<Configure>", lambda e: canvas.configure(scrollregion=canvas.bbox("all")))
canvas.create_window((0, 0), window=msgFrame, anchor="nw")
root.mainloop()
And the output:

Centering button using grid() in tkinter

I am simply trying to center some buttons in Python and it won't work even after looking at other a dozen threads.
This is my code at the moment:
import tkinter as tk
HEIGHT = 600
WIDTH = 1000
root = tk.Tk()
canvas = tk.Canvas(root, height=HEIGHT, width=WIDTH)
canvas.pack()
frame = tk.Frame(root, bg='#000A01')
frame.place(relwidth=1, relheight=1)
button0 = tk.Button(frame, text="LEFT", relief='flat', justify='center', bg='#000A01', fg='#00A010', padx='35', width='0', font=('Monofonto', 18))
button0.grid(row=0, column=0)
button1 = tk.Button(frame, text="CENTER", relief='flat', justify='center', bg='#000A01', fg='#00A010', padx='35', width='0', font=('Monofonto', 18))
button1.grid(row=0, column=1)
button2 = tk.Button(frame, text="RIGHT", relief='flat', justify='center', bg='#000A01', fg='#00A010', padx='35', width='0', font=('Monofonto', 18))
button2.grid(row=0, column=2)
root.mainloop()
this is the output
outputofabovecode
I want all buttons to be centered in the middle of the window and if I were to add more buttons in the same row it would add more to the center.
To center a button using place:
place(relx=0.5, rely=0.5, anchor=CENTER).

How can I insert label in a scrollable canvas?

The scroll don't work at all. What's wrong in the code?
I'm using Python 2.7.16
I read that listbox and text widgets are used only for text. As I want to use labels, I'm trying to insert the labels in a frame, but as a Frame didn't scroll I decided to use a canvas. But I couldn't get it to work.
from Tkinter import *
root = Tk()
frame = Frame(root, width=300, height=200)
frame.grid(row=0, column=0)
canvas=Canvas(frame, bg='#FFFFFF', width=300, height=200, scrollregion=(0,0,500,500))
vbar = Scrollbar(frame, orient=VERTICAL)
vbar.pack(side=RIGHT, fill=Y)
canvas.config(width=300, height=250)
canvas.pack(side=LEFT, expand=True, fill=BOTH)
mylist = Frame(canvas, width=100)
for x in range(10):
texto = Label(mylist, text='CODE', bd=2, width=7, relief=RIDGE)
texto.grid(row=x, column=0)
texto1 = Label(mylist, text='EQUIPAMENT', bd=2, width=20, relief=RIDGE)
texto1.grid(row=x, column=1)
mylist.place(x=0, y=0)
vbar.config(command=canvas.yview)
canvas.config(yscrollcommand=vbar.set)
mainloop()

Scrollbar not building properly in tkinter

Can anybody please tell me what I am doing wrong? The scrollbar seems not to reflect the area of the widget it is bound to.
Many thanks.
from tkinter import *
import tkinter as tk
#panel1
root = tk.Tk()
frame1 = tk.Frame(master=root, width=900, height=800)
canvas = tk.Canvas(frame1, width=900, height= 900)
vsb = tk.Scrollbar(frame1, orient=VERTICAL)
canvas.configure(yscrollcommand=vsb.set,
scrollregion=canvas.bbox("all"))
vsb.configure(command=canvas.yview)
canvas.pack(side=LEFT, fill=BOTH, expand=TRUE)
vsb.pack(fill=Y, side=RIGHT, expand=FALSE)
# notebook.add(frame1, text="1")
frame1.pack(expand=True, fill=BOTH)
root.mainloop()
If canvas is empty then there is nothing to scroll. And scrollbar reflects it correctly.
You have to add something to Canvas to scroll it.
I put two Frames bigger than window's size and now you have somthing to scroll.
You have to use scrollregion= after you put items in canvas. Or you can use after() to use scrollregion= after tkinter shows window.
import tkinter as tk
#def resize():
# canvas.configure(scrollregion=canvas.bbox("all"))
root = tk.Tk()
frame1 = tk.Frame(root, width=900, height=800)
frame1.pack(expand=True, fill='both')
canvas = tk.Canvas(frame1, width=900, height= 900)
canvas.pack(side='left', fill='both', expand=True)
vsb = tk.Scrollbar(frame1, orient='vertical')
vsb.pack(fill='y', side='right', expand=False)
vsb.configure(command=canvas.yview)
item_1 = tk.Frame(canvas, bg='red', width=500, height=500)
canvas.create_window(0, 0, window=item_1, anchor='nw')
item_2 = tk.Frame(canvas, bg='green', width=500, height=500)
canvas.create_window(500, 500, window=item_2, anchor='nw')
canvas.configure(yscrollcommand=vsb.set, scrollregion=canvas.bbox("all"))
#root.after(100, resize)
root.mainloop()

Categories

Resources