How do you make a child label smaller than its parent frame? - python

There is only one frame in my GUI, and it resizes itself to the size of the window. The frame has a child label, and I want the label to always be 1/3 the height of the frame and 1/1.5 the width of the frame. The code below tries to do that but the label always resizes itself to the size of the frame.
import tkinter
tk = tkinter.Tk()
tk.geometry("400x400")
f = tkinter.Frame(tk, bd=5, bg="white")
f.pack(padx=10, pady=10)
def callback(event):
f.config(height=tk.winfo_height(), width=tk.winfo_width())
l.config(width=int(f.winfo_width()/1.5), height=int(f.winfo_height()/3))
l = tkinter.Label(f, text="lead me lord", bg="yellow", relief=tkinter.RAISED, bd=5)
l.pack(side="bottom")
tk.bind("<Configure>", callback)
tk.mainloop()

The width and height of the label are in characters. In order to use pixels, you need to add an empty image to the label:
img = tkinter.PhotoImage() # an image of size 0
l = tkinter.Label(f, text="lead me lord", bg="yellow", relief=tkinter.RAISED, bd=5,
image=img, compound='center')
Actually you don't need to resize the frame in the callback if you add fill="both", expand=1 into f.pack(...):
import tkinter
tk = tkinter.Tk()
tk.geometry("400x400")
f = tkinter.Frame(tk, bd=5, bg="white")
f.pack(padx=10, pady=10, fill="both", expand=1)
def callback(event):
l.config(width=int(f.winfo_width()/1.5), height=int(f.winfo_height()/3))
#l.config(width=event.width*2//3, height=event.height//3) # same as above line if bind on frame
img = tkinter.PhotoImage()
l = tkinter.Label(f, text="lead me lord", bg="yellow", relief=tkinter.RAISED, bd=5,
image=img, compound='center')
l.pack(side="bottom")
f.bind("<Configure>", callback) # bind on frame instead of root window
tk.mainloop()

Given your precise specifications, the best solution is to use place since it lets you use relative widths and heights. However, if you plan to have other widgets in the window, place is rarely the right choice.
This example will do exactly what you asked: place the label at the bottom with 1/3 the height and 1/1.5 the width. There is no need to have a callback for when the window changes size.
Note: I had to change the call to pack for the frame. The text of your question said it would expand to fill the window but the code you had wasn't doing that. I added the fill and expand options.
import tkinter
tk = tkinter.Tk()
tk.geometry("400x400")
f = tkinter.Frame(tk, bd=5, bg="white")
f.pack(padx=10, pady=10, fill="both", expand=True)
l = tkinter.Label(f, text="lead me lord", bg="yellow", relief=tkinter.RAISED, bd=5)
l.place(relx=.5, rely=1.0, anchor="s", relheight=1/3., relwidth=1/1.5)
tkinter.mainloop()

Related

tkinter deforms my frames after inserting objects

So I want to insert some objects in a frame, but when I firstly added a button the frames where were they weren't suppoused to.
Before
After
And this is the code:
import tkinter as tk
root = tk.Tk()
root.geometry("1200x700")
# Main frames
frame1 = tk.Frame(root, width=1200, height=625)
frame2 = tk.Frame(root, width=1200, bg="black", height=75)
frame1.grid(row=1, column=1)
frame2.grid(row=2, column=1)
# Secondary frames
frame1browser = tk.Frame(frame1, height=625, width=850, bg="grey")
frame1a = tk.Frame(frame1,height=625, width=(1200-850))
frame1browser.grid(row=1, column=1)
frame1a.grid(row=1, column=2)
# Last frames
frame1aa = tk.Frame(frame1a, width=(1200-850),height=525, bg="green")
frame1ab = tk.Frame(frame1a, width=(1200-850),height=100, bg="yellow")
frame1aa.grid(row=1, column=1)
frame1ab.grid(row=2, column=1, sticky="nswe")
# Elements that are not frames
Button1 = tk.Button(frame1ab, text="ur mother")
Button1.grid(column=1, row=1)
root.mainloop()
The frame ignores the width/height explicitly given if there is a widget inside it, by default. AFAIK, It finds and uses the minimum size required to fit all the widgets, also accommodating to extra properties like sticky, expand and so on.
To override this behavior, you will have to use the <grid/pack>_propagate(False) depending on whether you use pack or grid on the items inside the frame. Now the frame will grow/shrink as much as the size you specify.
frame1ab.grid_propagate(False)

tkinter LabelFrame center text

I'm trying to center text in the frame using LabelFrame function. My code is below.
import tkinter as tk
window = tk.Tk()
for i in range(9):
for j in range(9):
frame = tk.LabelFrame(
master=window,
relief=tk.RAISED,
borderwidth=5,
width=50,
height=50,
text=i+j,
labelanchor = 'n'
)
frame.grid(row=i, column=j)
window.geometry("500x500")
window.mainloop()
Argument labelanchor that specify position gives only options on the edge of the frame. Is there any simple way to center text inside of the frame using LabelFrame?
Is there any simple way to center text inside of the frame using LabelFrame?
The text of the labelframe can only appear along the edges of the frame. If you wish for text to appear inside the frame, you must create a Label and add it to the frame.
Using a frame and a label
If you wish to put other widgets in the frame and don't want this text to interfere with the other widgets, this is a perfect opportunity to use place.
The following example adds the label "Hello, world" to appear in the center of the widget. A button is placed in the frame just to show that its placement is not affected by the label, or vise versa. The screenshots show what the frame looks like naturally and when the window is resized.
import tkinter as tk
root = tk.Tk()
lf = tk.Frame(root, bd=2, relief="groove")
lf_label = tk.Label(lf, text="Hello, world")
lf_label.place(relx=.5, rely=.5, anchor="c")
lf.pack(padx=20, pady=20, fill="both", expand=True)
b = tk.Button(lf, text="Click me")
b.pack(padx=10, pady=10)
root.mainloop()
Using only a label
You can add widgets inside any other widget. So, instead of a frame you could just use a label. By default, the text will be centered, and just like with the previous example it won't affect the layout of other widgets.
I haven't included screenshots because the results are identical to the previous example.
import tkinter as tk
root = tk.Tk()
lf = tk.Label(text="Hello, world", bd=2, relief="groove")
lf.pack(padx=20, pady=20, fill="both", expand=True)
b = tk.Button(lf, text="Click me")
b.grid(row=0, column=0)
root.mainloop()

Why isn't this frame in tkinter centered correctly?

I want this entry bar and other contents I'll add to the frame later to be centred correctly, I received this code that supposedly should work but it isn't.
import tkinter as tk
import math
import time
root = tk.Tk()
root.geometry()
root.attributes("-fullscreen", True)
exit_button = tk.Button(root, text = "Exit", command = root.destroy)
exit_button.place(x=1506, y=0)
frame = tk.Frame(root)
main_entry = tk.Entry(root, width = 100, fg = "black")
main_entry.place(x=50, y=50)
frame.place(relx=.5,rely=.5, anchor='center')
root.mainloop()
As you can see the frame isn't centred so how can I fix this?
In order to achieve widget centering on a fullscreen I've had to use grid manager.
The code below works but the exact positioning requires some fiddling with frame padding.
frame padx = w/2-300 and pady = h/2-45 are arbitrary values found using a bit of trial and error.
import tkinter as tk
root = tk.Tk()
root.attributes( '-fullscreen', True )
w, h = root.winfo_screenwidth(), root.winfo_screenheight()
frame = tk.Frame( root )
main_entry = tk.Entry( frame, width = 100 )
main_entry.grid( row = 0, column = 0, sticky = tk.NSEW )
frame.grid( row = 0, column = 0, padx = w/2-300, pady = h/2-45, sticky = tk.NSEW )
exit_button = tk.Button( frame, text = 'Exit', command = root.destroy )
exit_button.grid( row = 1, column = 0, sticky = tk.NSEW )
tk.mainloop()
Frame automatically changes size to size of objects inside Frame (when you use pack()) but you have nothing inside Frame. You put all widgets directly in root - so Frame has no size (width zero, height zero) and it is not visible.
When I use tk.Frame(root, bg='red', width=100, height=100) then I see small red frame in the center.
You have two problems:
(1) you put Entry in wrong parent - it has to be frame instead of root,
(2) you use place() which doesn't resize Frame to its children and it has size zero - so you don't see it. You would have to set size of Frame manully (ie. tk.Frame(..., width=100, height=100)) or you could use pack() and it will resize it automatically.
I add colors for backgrounds to see widgets. blue for window and red for frame.
import tkinter as tk
root = tk.Tk()
root['bg'] = 'blue'
root.attributes("-fullscreen", True)
exit_button = tk.Button(root, text="Exit", command=root.destroy)
exit_button.place(x=1506, y=0)
frame = tk.Frame(root, bg='red')
frame.place(relx=.5, rely=.5, anchor='center')
main_entry = tk.Entry(frame, width=100, fg="black")
main_entry.pack(padx=50, pady=50) # with external margins 50
root.mainloop()

How do I change the width of Tkinter widgets in smaller increments (Python)?

The left side of the box is aligned with the left side of some_label. I am unable to set the width so that the right side of some_label also aligns with the right side of the box because the increments between different width values are too large. A width of 35 puts the right end of some_label too far left and a width of 36 puts it too far right.
from tkinter import *
root = Tk()
root.geometry('500x500')
box = Frame(root, width=383, height=246, bg='black')
box.place(x=241, y=65, anchor=CENTER)
some_label = Label(root, text='Some Label', borderwidth=1, relief='solid')
some_label.place(x=50, y=210)
some_label.config(width=35, font=('TkDefaultFont', 15)) # whether width is 35 or 36, the label never aligns with the box
mainloop()
Since you use place(), you can specify the width directly:
import tkinter as tk
root = tk.Tk()
root.geometry('500x500')
box = tk.Frame(root, width=383, height=246, bg='black')
box.place(x=241, y=65, anchor='c')
some_label = tk.Label(root, text='Some Label', borderwidth=1, relief='solid')
some_label.place(x=241, y=210, width=383, anchor='c') # set width to same as 'box'
some_label.config(font=('TkDefaultFont', 15))
root.mainloop()
To set the width of a Label in pixels you have to include an image. Easiest would to use a transparent pixel and present it in the label with compound='center' which does not offset the text.
Alternatively you could simply use a containing frame to control the widget sizes.
I have included both ways in my example.
from tkinter import *
root = Tk()
root.geometry('500x500')
box = Frame(root, width=383, height=246, bg='black')
box.place(x=241, y=65, anchor=CENTER)
some_label = Label(root, text='Some Label', borderwidth=1, relief='solid')
some_label.place(x=50, y=210)
img = PhotoImage(file='images/pixel.gif') # Create image
some_label.config(image=img, compound='center') # Set image in label
some_label.config(width=379, font=('TkDefaultFont', 15)) # Size in pixels
# Alternateivly control size by an containing widget:
container = Frame(root, bg='tan') # Let frame adjust to contained widgets
container.place(x=241, y=360, anchor=CENTER)
# Let the contained widget set width
other_box = Frame(container, height=100, width=383, bg='black') # Set width
other_box.pack()
other_label = Label(container, text='Some Label', borderwidth=1, relief='solid')
other_label.pack(expand=True, fill=X, pady=(20,0)) # Expand to fill container
other_label.config(font=('TkDefaultFont', 15))
mainloop()
If you are going to make complex GUI designs, grid() is almost always easier to use.

Frame loosing height when filled tkinter

Hello everyone i am learning to make a gui with tkinter but i run into something and can't find the answer to it i have 3 frames a header a shadow for the header and a main content frame and that works fine
code :
root = Tk()
root.geometry("1080x600")
root.minsize(width=1080, height=600)
root.maxsize(width=1080, height=600)
root.title("learning ui")
headerFrame = Frame(root, height=50, bg="#17181b")
headerShadow = Frame(root, height=3, bg="#08090a")
contentFrame = Frame(root, bg="#17181b")
headerFrame.pack(side=TOP, fill=X)
headerShadow.pack(fill=X)
contentFrame.pack(fill=BOTH, expand=True)
root.mainloop()
Screen shot :
But when i pack something to the header it looses its height.
code:
root = Tk()
root.geometry("1080x600")
root.minsize(width=1080, height=600)
root.maxsize(width=1080, height=600)
root.title("learning ui")
headerFrame = Frame(root, height=50, bg="#17181b")
headerShadow = Frame(root, height=3, bg="#08090a")
contentFrame = Frame(root, bg="#17181b")
headerFrame.pack(side=TOP, fill=X)
headerShadow.pack(fill=X)
contentFrame.pack(fill=BOTH, expand=True)
main.e = Entry(headerFrame)
main.e.pack(side=RIGHT)
main.e.focus_set()
searchBtn = Button(headerFrame, text="Search", command=lambda: callback(retrieve_input()))
searchBtn.pack(side=RIGHT)
def callback(q):
print q
root.mainloop()
Screen shot:
All widgets are designed to "shrink to fit" their children. While this may seem counter-intuitive at first, it's the best way to do widget layout. Don't try to force a frame or window to be a specific size, just put the widgets in that you want and it will end up being the right size.
If you want to turn this feature off you can, but I strongly recommend against it. If you want to know more, search for "overrideredirect".

Categories

Resources