Why isn't Listbox covering whole Frame in Tkinter? - python

I'm creating a simple GUI with Python Tkinter, and using Frame as containers. When I added a Listbox inside the Frame, it only occupies a small space in the Frame, rest space remains empty. I want it to cover whole Frame. Here's the code, and the output as image:
from tkinter import *
root = Tk()
root.geometry('1280x720')
root.title("Music Player")
root.grid_rowconfigure((0,1,2,3,4,5), weight=1)
root.grid_columnconfigure((0,), weight=1)
root.grid_columnconfigure((1,), weight=5)
root.resizable(False, False)
listframel = Frame(root, highlightbackground="black", highlightthickness=5)
listframel.grid(row=0, column=0, sticky=NSEW, rowspan=5)
listframer = Frame(root, highlightbackground="black", highlightthickness=5)
listframer.grid(row=0, column=1, sticky=NSEW, rowspan=5)
listbox = Listbox(listframel)
listbox.grid(row=0, column=0, rowspan=5, sticky=NSEW)
lst = list(x for x in range(100))
for i in range(len(lst)):
listbox.insert(i+1, lst[i]+1)
root.mainloop()

You need to apply grid_rowconfigure and grid_columnconfigure to all containers (root, listframel and listframer).

Related

Tkinter: 2 buttons next to each other resize in width with window. How to?

The 2 buttons should take each of the half of the window, one on the left, one on the right. The height is fixed all time. With .grid() nor .place() I can come to that result. The red bar is the color of the frame where the buttons are placed on. The buttons resize in width with the window, but keep their constant height.
How to?
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red')
frame.pack(fill='both', expand=True)
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.grid(row=0, column=0, sticky='nsew')
button2.grid(row=0, column=1, sticky='nsew')
frame.columnconfigure(0, weight=1)
frame.columnconfigure(1, weight=1)
root.mainloop()
Thx.
In the mean time I got this:
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red',height=30)
frame.pack(fill='both')
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.place(relwidth=0.5, relx=0, relheight=1)
button2.place(relwidth=0.5, relx=0.5, relheight=1)
root.mainloop()
Assuming that the buttons are the only widgets in the frame (ie: you are making a toolbar), I would use pack. grid will also work, but it requires one extra line of code.
Using pack
Here's a version with pack. Notice that the frame is packed along the top and fills the window in the "x" direction. The buttons each are instructed to expand (ie: receive extra, unused space) and to fill the space allocated to them in the "x" direction.
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red',height=30)
frame.pack(side="top", fill="x")
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.pack(side="left", fill="x", expand=True)
button2.pack(side="right", fill="x", expand=True)
root.mainloop()
Using Grid
A version with grid is similar, but you must use columnconfigure to give a non-zero weight to the two columns:
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red',height=30)
frame.pack(side="top", fill="x")
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.grid(row=0, column=0, sticky="ew")
button2.grid(row=0, column=1, sticky="ew")
frame.grid_columnconfigure((0, 1), weight=1)
root.mainloop()

How do I keep elements in a frame justified to the right while keeping the entire frame coloured, regardless of the size of the window?

I'm new to tkinter so I'm a little lost in terms of grid layout. What I'm trying to do is have a logo sit in the bottom right corner of the window, and always be in that position no matter how big the window is. I have managed to position the logo no problem, but when I justify to the right, the frame becomes white on the left side of the elements. How do I keep this part Black as it is under the logo? Left justify fills the whole frame with black, but right justify only fills from the logo/text onward.
This is what I am getting
Here is my current code:
from tkinter import *
root = Tk()
# GUI attributes
root.title('Lantern')
root.geometry('800x600')
root.iconbitmap('iconrl.ico')
# main containers
topFrame = Frame(root, bg='#000000', width=800, height=100, pady=3)
center = Frame(root, bg='#181818', padx=3, pady=3)
btmFrame = Frame(root, bg='#000000', width=800, height=90, padx=10)
# layout all of the main containers
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)
topFrame.grid(row=0, sticky='ew')
center.grid(row=1, sticky='nsew')
btmFrame.grid(row=2, sticky='e')
# topFrame Widgets
rlLabel = Label(topFrame, text='Lantern ', font=('Verdana', 12), fg='red', bg='#000000', width=10)
# topFrame Layout
rlLabel.grid(row=0, columnspan=3)
# center Widgets
# center Layout
# btmFrame Widgets
powered = Label(btmFrame, text='Powered by: ', font=('Verdana', 12), fg='#FFF204', bg='#000000', width=15)
sLogo = PhotoImage(file='slogo.png')
sLogoLabel = Label(btmFrame, image=sLogo, bg='#000000')
# btmFrame Layout
powered.grid(row=0, column=1, sticky='e')
sLogoLabel.grid(row=0, column=2, sticky='e')
root.mainloop()
First you need to change btmFrame.grid(row=2, sticky='e') to btmFrame.grid(row=2, sticky='ew'), so that the frame fills all the space horizontally.
Then add btmFrame.columnconfigure(0, weight=1) to push the powered and sLogoLabel to the right of the frame.
Or you can use pack() on powered and sLogoLabel:
sLogoLabel.pack(side='right')
powered.pack(side='right')

How to get .grid_columnconfigure() working inside Frame using grid-Manager?

I already asked this question, but got answers only for pack-Manager.
I want to create a GUI with tkinter in python using grid-Method and grid_columnconfigure/grid_rowconfigure. Unfortunately, this is not working inside a Frame.
from tkinter import *
master = Tk()
master.state('zoomed')
f = Frame(master, width=800, height=400)
Label1 = Label(f, text='Label 1')
Label2 = Label(f, text='Label 2')
f.grid_columnconfigure(0, weight=1)
f.grid_columnconfigure(2, weight=1)
f.grid_columnconfigure(4, weight=1)
Label1.grid(row=0, column=1)
Label2.grid(row=0, column=3)
master.grid_rowconfigure(0, weight=1)
master.grid_rowconfigure(2, weight=1)
master.grid_columnconfigure(0, weight=1)
master.grid_columnconfigure(2, weight=1)
f.grid(row=1, column=1)
master.mainloop()
I expected to have space between the two labels, but this is not working, because Frame is not taking more space inside master. How can I do this?
This works for me - but it would be easier to use pack()
Frame will not change size to Labels size:
f.grid_propagate(False)
Column and row in which is Frame will use all space (because there are not other columns and rows)
master.grid_rowconfigure(1, weight=1)
master.grid_columnconfigure(1, weight=1)
Frame will resize to column and row size (which already use all space in window)
f.grid(..., sticky='news')
To test code I added background colors - it shows me real size of widgets.
Code:
from tkinter import *
master = Tk()
master['bg'] = 'red'
master.grid_rowconfigure(1, weight=1)
master.grid_columnconfigure(1, weight=1)
f = Frame(master, width=400, height=300)
f.grid(row=1, column=1, sticky='news')
f.grid_propagate(False)
f.grid_columnconfigure(0, weight=1)
f.grid_columnconfigure(2, weight=1)
f.grid_columnconfigure(4, weight=1)
l1 = Label(f, text='Label 1', bg='green')
l2 = Label(f, text='Label 2', bg='green')
l1.grid(row=0, column=1)
l2.grid(row=0, column=3)
master.mainloop()
If you remove width=400, height=300 then window will have no size at start.

Changing the size of a scrollbar in tkinter(using grid layout)

I'm making a Tkinter GUI that allows you to query a database and will display results in a scrollable frame. However, when you produce the results the scrollbar will not adjust to match the new size of the frame. How can I get the scrollbar to be able to display all of the results? I've put together a quick and dirty version of the code to demonstrate the problem I'm having.
import tkinter as tk
def Lookup():
list = frame_buttons.grid_slaves()
for l in list:
l.destroy()
for x in range(1000):
tk.Label(frame_buttons, text="test", background="white").grid(row=x)
root = tk.Tk()
root.grid_rowconfigure(0, weight=1)
root.columnconfigure(0, weight=1)
frame_main = tk.Frame(root, bg="white")
frame_main.grid(row = 0,sticky='news')
frame_input = tk.Frame(frame_main, background = "white")
frame_input.grid(row=0, column=0, pady=(5, 0), sticky='nw')
tk.Button(frame_input, text="Search", fg="black", background = "grey",command=Lookup).grid(row=3, column=0,sticky='nw')
# Create a frame for the canvas with non-zero row&column weights
frame_canvas = tk.Frame(frame_main)
frame_canvas.grid(row=1, column=0, pady=(5, 0), sticky='nw')
frame_canvas.grid_rowconfigure(0, weight=1)
frame_canvas.grid_columnconfigure(0, weight=1)
# Set grid_propagate to False to allow 5-by-5 buttons resizing later
frame_canvas.grid_propagate(False)
# Add a canvas in that frame
canvas = tk.Canvas(frame_canvas, bg="gray")
canvas.grid(row=0, column=0, sticky="news")
# Link a scrollbar to the canvas
vsb = tk.Scrollbar(frame_canvas, orient="vertical", command=canvas.yview)
vsb.grid(row=0, column=1, sticky='ns')
canvas.configure(yscrollcommand=vsb.set)
frame_buttons = tk.Frame(canvas, bg="gray")
canvas.create_window((0, 0), window=frame_buttons, anchor='nw')
for x in range(15):
tk.Label(frame_buttons, text="blah", background = "white").grid(row=x)
frame_buttons.update_idletasks()
frame_canvas.config(width=500, height=100)
canvas.config(scrollregion=canvas.bbox("all"))
root.mainloop()
this initially puts 20 labels in the scroll region, which is enough to activate the scrollbar. Then when you click search it replaces those 20 lables with 1000 test labels. But only the first 20 will be viewable.
You need to reset the scrollregion whenever the frame changes size and the items are redrawn.
The normal way to do that is to bind to the <Configure> event of the frame so that it happens automatically as the frame grows and shrinks.
Example:
def reset_scrollregion(event):
canvas.config(scrollregion=canvas.bbox("all"))
...
frame_buttons.bind("<Configure>", reset_scrollregion)

How to make a widget occupy the same width as that of its master frame when using columnspan?

Given the following grid layout configuration:
It was generated through code:
from Tkinter import *
master = Tk()
frame1 = Frame(master, width=100, height=100, bg="red")
frame1.grid(sticky="nsew", columnspan=4)
frame2 = Frame(master, width=100, height=100, bg="blue")
frame2.grid()
frame3 = Frame(master, width=100, height=100, bg="green")
frame3.grid(row=1, column=1)
frame4 = Frame(master, width=100, height=100, bg="yellow")
frame4.grid(row=1, column=2)
frame4 = Frame(master, width=100, height=100, bg="purple")
frame4.grid(row=1, column=3)
master.mainloop()
I tried to insert a Entry in frame1 so it extends to the whole frame1 width with the following code:
e1 = Entry(frame1)
e1.grid(sticky="we", columnspan=4)
However, I have got the following result:
How can I make the Entry widget occupy the same width as the frame1?
The entry is inside frame1, so the grid it is in is completely unrelated to the grid in the root window.
Since you didn't tell tkinter what to do with extra space inside frame1, it left it unused. If you want the entry widget which is in column 0 to fill the frame, you need to give its column a weight.
frame1.grid_columnconfigure(0, weight=1)
If this is the only widget going in frame1, you might want to consider using pack since you can do it all in one line of code:
e1.pack(side="top", fill="x", expand=True)

Categories

Resources