Tkinter scrollbars not filling or aligning correctly - python

I'm trying to create a frame with both a vertical and horizontal scrollbar, but the horizontal one seems to pack next to the canvas, and not below it. I have the scrollbar packed with side=tk.BOTTOM and fill=tk.X, so I'm not sure what else I need to add. What should I do to get the horizontal scrollbar to stretch across the entire canvas?
import tkinter as tk
from tkinter import ttk
root=tk.Tk()
frame=tk.Frame(root)
frame.pack()
canvas=tk.Canvas(frame, height=200, width=200, background="blue")
canvas.pack(side=tk.LEFT)
yscrollbar=tk.Scrollbar(frame, orient=tk.VERTICAL, command=canvas.yview)
yscrollbar.pack(side=tk.RIGHT, fill=tk.Y)
xscrollbar=tk.Scrollbar(frame, orient=tk.HORIZONTAL, command=canvas.xview)
xscrollbar.pack(side=tk.BOTTOM, fill=tk.X)
canvas.configure(yscrollcommand=yscrollbar.set)
canvas.configure(xscrollcommand=xscrollbar.set)
root.mainloop()
Right now the canvas is set to side=tk.LEFT. If I set it to side=tk.TOP, the reverse problem happens.

The issue comes from the order in which you pack the widgets. The idea is that pack uses the remaining space to put what is left, so you need to pack first the scrollbars, then at last the canvas:
import tkinter as tk
from tkinter import ttk
root=tk.Tk()
frame=tk.Frame(root)
frame.pack()
canvas=tk.Canvas(frame, height=200, width=200, background="blue")
yscrollbar=tk.Scrollbar(frame, orient=tk.VERTICAL, command=canvas.yview)
xscrollbar=tk.Scrollbar(frame, orient=tk.HORIZONTAL, command=canvas.xview)
xscrollbar.pack(side=tk.BOTTOM, fill=tk.X)
yscrollbar.pack(side=tk.RIGHT, fill=tk.Y)
canvas.pack(side=tk.LEFT)
canvas.configure(yscrollcommand=yscrollbar.set)
canvas.configure(xscrollcommand=xscrollbar.set)
root.mainloop()
However, because pack is not so intuitive when it comes to more complex GUI, I prefer to use grid:
xscrollbar.grid(row=1, column=0, sticky='ew')
yscrollbar.grid(row=0, column=1, sticky='ns')
canvas.grid(row=0, column=0, sticky='ewns')
But in this case, if you want your GUI to resize properly, you will need to add
frame.columnconfigure(0, weight=1)
frame.rowconfigure(0, weight=1)
so that the row and column 0 of the grid will fill all the available space.

In my env, calling canvas.pack and frame.pack after defining y and xscrollbar worked fine.
import tkinter as tk
from tkinter import ttk
root=tk.Tk()
frame=tk.Frame(root)
yscrollbar=tk.Scrollbar(frame, orient=tk.VERTICAL, command=canvas.yview)
yscrollbar.pack(side=tk.RIGHT, fill=tk.Y)
xscrollbar=tk.Scrollbar(frame, orient=tk.HORIZONTAL, command=canvas.xview)
xscrollbar.pack(side=tk.BOTTOM, fill=tk.X)
canvas=tk.Canvas(frame, height=200, width=200, background="blue")
canvas.pack(side=tk.LEFT)
frame.pack()
canvas.configure(yscrollcommand=yscrollbar.set)
canvas.configure(xscrollcommand=xscrollbar.set)
root.mainloop()

Related

Scroll bars not working correctly with canvas

The scroll bars move the canvas but they always snap back to the top or the left. What am I doing wrong?
import tkinter as Tk
root = Tk.Tk()
root.rowconfigure(0,weight=1)
root.columnconfigure(0,weight=1)
frame = Tk.Frame(root)
frame.grid(row=0, column=0, sticky='NSEW')
frame.rowconfigure(0,weight=1)
frame.columnconfigure(0,weight=1)
canvas = Tk.Canvas(frame)
canvas.grid(row=0, column=0, sticky='NSEW')
scroll_x = Tk.Scrollbar(frame, orient="horizontal", command=canvas.xview)
scroll_x.grid(row=1, column=0, sticky="ew")
scroll_y = Tk.Scrollbar(frame, orient="vertical", command=canvas.yview)
scroll_y.grid(row=0, column=1, sticky="ns")
canvas.create_oval(0,0,1333,1000)
canvas.configure(scrollregion=canvas.bbox("all"))
root.mainloop()
Scrollbars require two-way communication with the widgets they are controlling. You've properly configured the scrollbars but haven't configured the canvas to update the scrollbars.
To do that, add the following code after you've defined the canvas and scrollbars:
canvas.configure(yscrollcommand=scroll_y.set, xscrollcommand=scroll_x.set)

Python tk scrollbar on listbox not working in windows 10

I have python3 tk code that seems to work okay in linux (ubuntu) but bizarely does not work in windows 10. The scrollbar on the listbox doesn't scroll in windows ...
import tkinter as tk
root = tk.Tk()
root.title("My MHT")
root.geometry("500x500")
# create all of the main containers
toppest_frame = tk.Frame(root, bg='thistle3', width=500, height=25, pady=3)
top_frame = tk.Frame(root, bg='cyan', width=500, height=250, pady=3)
bottom_frame = tk.Frame(root, bg='lavender', width=500, height=250, pady=3)
# layout all of the main containers
root.grid_rowconfigure(0, weight=1)
root.grid_rowconfigure(1, weight=1)
root.grid_rowconfigure(2, weight=1)
root.grid_columnconfigure(0, weight=1)
toppest_frame.grid(row=0, sticky="nesw")
top_frame.grid(row=1, sticky="nesw")
bottom_frame.grid(row=2, sticky="nesw")
#create scrollbar
sb1 = tk.Scrollbar(top_frame,orient="vertical")
sb1.grid(row=0,column=5)
sb2 = tk.Scrollbar(top_frame,orient="horizontal")
sb2.grid(row=1,columnspan=5)
# create the widgets for the top frame
listBox = tk.Listbox(top_frame, relief="sunken",bd=2,selectmode="single")
# layout the widgets in the top frame
top_frame.grid_rowconfigure(0,weight=1)
top_frame.grid_columnconfigure(0,weight=1)
listBox.grid(row=0,sticky="nesw",columnspan=5)
#populate listbox
listBox.delete(0, "end")
for values in range(100):
listBox.insert("end", values)
#attach scrollbar to listbox
listBox.configure(xscrollcommand=sb1.set)
sb1.configure(command=listBox.yview)
listBox.configure(yscrollcommand=sb2.set)
sb2.configure(command=listBox.xview)
root.mainloop()
Am I doing something wrong?
Many thanks.
I do not know how you got this to work in Linux with tkinter, but anyway you are setting the scrollbar for the wrong axis.
listBox.configure(yscrollcommand=sb1.set) # Was xscrollcommand
sb1.configure(command=listBox.yview)
listBox.configure(xscrollcommand=sb2.set) # Was yscrollcommand
sb2.configure(command=listBox.xview)
Then you also need the scrollbar to expand along its field, with grid you use sticky, if you were using pack then an appropriate combination of fill and side, sometimes expand too:
sb1 = tk.Scrollbar(top_frame,orient="vertical")
sb1.grid(row=0,column=5,sticky='ns') # Expand north to south
sb2 = tk.Scrollbar(top_frame,orient="horizontal")
sb2.grid(row=1,columnspan=5,sticky='ew') # Expand east to west
I also hope you have a good reason to use columnspan=5 and did not get it confused with column. Ideally in this situation, it should be column 1 and 0 for sb1 and sb2 respectively.

tkinter centering two or more widgets

So I created a frame in which I want to put two widgets with them being centered on the x-axis. When it's one object pack() centers it automatically. But I can't figure out two widgets. I tried with grid() but there is free space left on the right which makes it look unsymetrical as seen in the image.
how could I get what is seen on the right? (I'd prefer it being dont with pack() but if there is a solution with grid() and/or place() as well i'd appreciate those as well!)
here's the code for the left picture
from tkinter import *
from tkinter import font
root = Tk()
root.geometry("500x500")
frame = Frame(root, bg="white", highlightbackground="black", highlightthickness=2)
frame.place(relwidth=0.5, relheight=0.5, relx=0.5, rely=0.5, anchor=CENTER)
label = Label(frame, bg="lime", text="label", font=font.Font(size=20))
label.grid(column=0, row=0)
button = Button(frame, bg="yellow", text="pressbutton", font=font.Font(size=20))
button.grid(column=1, row=0)
root.mainloop()
You can use frame.pack() to easily position the frame in the top, middle of its parent.
from tkinter import *
from tkinter import font
root = Tk()
root.geometry("500x500")
frame = Frame(root, bg="white", highlightbackground="black", highlightthickness=2)
frame.pack()
label = Label(frame, bg="lime", text="label", font=font.Font(size=20))
label.grid(column=0, row=0)
button = Button(frame, bg="yellow", text="pressbutton", font=font.Font(size=20))
button.grid(column=1, row=0)
root.mainloop()
You can put the label and button in another frame, and use pack() on that frame:
from tkinter import *
from tkinter import font
root = Tk()
root.geometry("500x500")
frame = Frame(root, bg="white", highlightbackground="black", highlightthickness=2)
frame.place(relwidth=0.5, relheight=0.5, relx=0.5, rely=0.5, anchor=CENTER)
frame2 = Frame(frame)
frame2.pack() # default side='top'
label = Label(frame2, bg="lime", text="label", font=font.Font(size=20))
label.pack(side='left', fill='both')
button = Button(frame2, bg="yellow", text="pressbutton", font=font.Font(size=20))
button.pack(side='left')
root.mainloop()

how to fix the position of scrollbar of scrolledtext widget in tkinter?

i want to fix the postion of scrollbar of scrolledtext widget of tkinter.
i'am creating a chatbot where after every new message there is need to drag the scrollbar down to see conversation which has a bad impact.
here is the code of scrolledtext
self.conversation = ScrolledText.ScrolledText(self,
state='disabled',borderwidth=5,
highlightthickness=1,
bg='#15202b',fg='#16202A',
font=('Arial Bold',8))
self.conversation.grid(column=0, row=1, columnspan=2, sticky='nesw', padx=3, pady=3)
from tkinter import *
from tkinter import scrolledtext
root = Tk()
scroll_x = Scrollbar(root, orient="horizontal")
text = scrolledtext.ScrolledText(root, wrap=NONE)
text.config(xscrollcommand=scroll_x.set)
scroll_x.configure(command=text.xview)
text.pack(fill=X)
scroll_x.pack(fill=X)
for i in range(10000):
text.insert(END, str(i)+"\n")
text.see("end")
root.update()
root.mainloop()
The command you are looking for is see("end")
text.see("end")
root.update()

Tkinter: Placing the Labels one after another in Canvas relatively.

I would like to arrange the Labels in the canvas one after another. But placement is not coming out as desired.
Below is the function that inserts the labels in the canvas. But the ones in the for loop overlaps. Reason - some labels are larger in size than the other. Hence, I assume that largest size be 80 and do the placements respectively. I would like to change this type of approach. Rather I want the labels to be placed relatively one after the other.
def calculate(*args):
try:
ttk.Label(canvas, text="Result:").place(x=20, y=20)
ttk.Label(canvas, text="Topic:").place(x=20, y=80)
ttk.Label(canvas, textvariable=topic).place(x=200, y=80)
ttk.Label(canvas, text="Environment:").place(x=20, y=120)
ttk.Label(canvas, textvariable=environment).place(x=200, y=120)
ttk.Label(canvas, text="Event Results:").place(x=20, y=160)
inputValue=TextArea.get("1.0","end-1c")
len_max=0
result={}
for s in inputValue.splitlines():
data = MainInstance.searchWithPayload(s)
result[s]=data
if len(s+data) > len_max:
len_max = len(s+data)
i = 190
for key in result.keys():
print(key)
print(result[key])
ttk.Label(canvas, text=key+"\n\n"+result[key], wraplength=800).place(x=20,y = i)
i = i + 80
except ValueError:
pass
Below is the code that integrates the canvas widget. And the calculate button calls the calculate function.
ttk.Button(page2, text="Exit",command=page1.quit).grid(column=2, row=8)
ttk.Button(page2, text="Calculate", command=calculate).grid(column=3, row=8)
canvas = Canvas(root, width=900, height=universal_height)
canvas.grid(column=1, row=0)
root.mainloop()
Actually, there are two parts of the question:
How can I relatively place the label to stop the overlapping?
I tried adding the scroll to the canvas. But the application does not respond and does not pop up.
Code for adding the scrollbar:
canvas=Canvas(root,bg='#FFFFFF',width=300,height=300,scrollregion=
(0,0,500,500))
hbar=Scrollbar(root,orient=HORIZONTAL)
hbar.pack(side=BOTTOM,fill=X)
hbar.config(command=canvas.xview)
vbar=Scrollbar(root,orient=VERTICAL)
vbar.pack(side=RIGHT,fill=Y)
vbar.config(command=canvas.yview)
canvas.config(width=300,height=300)
canvas.config(xscrollcommand=hbar.set, yscrollcommand=vbar.set)
canvas.pack(side=LEFT,expand=True,fill=BOTH)
This is the output that I am getting, wherein the first two labels are getting overlapped.
If you want to scroll the widgets that you put inside the canvas, you need to use canvas.create_window(x, y, window=label) instead of label.place(...).
I suggest you to create a frame, grid all you labels inside it so that you won't have overlapping issues and put the frame inside the canvas using create_window to be able to scroll it:
import tkinter as tk
from tkinter import ttk
def on_resize(event):
"""Resize canvas scrollregion when the canvas is resized."""
canvas.configure(scrollregion=canvas.bbox('all'))
root = tk.Tk()
root.geometry('100x100')
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)
canvas = tk.Canvas(root)
frame = ttk.Frame(canvas)
# create and grid the labels
for i in range(3):
for j in range(3):
ttk.Label(frame, text="Label %i-%i" % (i, j)).grid(row=i, column=j, padx=10, pady=10)
# put the frame in the canvas
canvas.create_window(0, 0, anchor='nw', window=frame)
# add the scrollbars
vbar = ttk.Scrollbar(root, orient='vertical', command=canvas.yview)
hbar = ttk.Scrollbar(root, orient='horizontal', command=canvas.xview)
canvas.configure(xscrollcommand=hbar.set,
yscrollcommand=vbar.set,
scrollregion=canvas.bbox('all'))
canvas.grid(row=0, column=0, sticky='eswn')
vbar.grid(row=0, column=1, sticky='ns')
hbar.grid(row=1, column=0, sticky='ew')
canvas.bind('<Configure>', on_resize)
root.mainloop()

Categories