I have 2 frames in a column. The top frame should fill x and be fixed y. This works good. The bottom frame should fill the remaining space, but setting fill to both and expand to True doesn't seem to work the way I expected it to. The bottom frame expands, but not fully, leaving gray background of the root between the frames.
Here is minimum code to reproduce the problem:
import Tkinter as tk
if __name__ == "__main__":
root = tk.Tk()
top_frame = tk.Frame(root, height=50, bg="blue")
top_frame.pack(anchor="n", fill="x", expand=True)
bot_frame = tk.Frame(root, bg="red")
bot_frame.pack(anchor="n", fill="both", expand=True)
root.mainloop()
Ideally, the bottom frame should also start with a minimum size, but I will probably be able to figure it out once this problem is solved.
Remove expand=True from first frame because it informs pack() to use extra free space with this widget too.
import Tkinter as tk
if __name__ == "__main__":
root = tk.Tk()
top_frame = tk.Frame(root, height=50, bg="blue")
top_frame.pack(anchor="n", fill="x") # without expand=True
bot_frame = tk.Frame(root, bg="red")
bot_frame.pack(anchor="n", fill="both", expand=True)
root.mainloop()
expand and fill are completely independent of each other. expand answers the question "do I get extra space?", and fill answers the question "how do I use the extra space that was given to me?".
So, you have two frames both of which have expand=True. That means that tkinter will give half of the extra space to one frame, and half the extra space to the other, regardless of how those widgets plan to use the extra space.
Since the top frame only fills in the X direction, the extra space it has been given in the Y direction goes unused. That is why it appears gray below the defined height of the frame.
The solution to this specific problem is to have expand be false for the top frame because you do not want it to be given extra space.
Related
Result of following code is a blank window :
import tkinter as tk
from tkinter import Tk, Grid, Frame
root = Tk()
root.geometry("70x80")
Grid.rowconfigure(root, index=0, weight=1)
Grid.columnconfigure(root, index=0, weight=1)
topRowFrame= Frame(root)
Grid.rowconfigure(topRowFrame, index=0, weight=1)
Grid.columnconfigure(topRowFrame, index=0, weight=1)
topRowFrame.grid(column=0,row=0)
bookingIdLabelDiag=tk.Label(topRowFrame, text='Booking ID')
bookingIdLabelDiag.grid(column=0, row=0)
topRowFrame.grid_propagate(False)
root.mainloop()
Label text 'Booking ID' doesn't appear. It works fine when I comment grid_propopagate line. Please help.
You haven't set the dimensions of the frame, so when you disable content-fitting, the frame collapses.
w.grid_propagate()
Normally, all widgets propagate their dimensions, meaning that they adjust to fit the contents. However, sometimes you want to force a widget to be a certain size, regardless of the size of its contents. To do this, call w.grid_propagate(0) where w is the widget whose size you want to force.
topRowFrame = Frame(root, width=65, height=70, bg='red')
What you are seeing is definitely because grid_propagate is working. This says "don't let the frame grow or shrink to fit its contents" Because you didn't give the frame a size, it's going to default to 1x1. The widgets are there, but since the frame is only 1 pixel wide and tall you can't see them.
If you give the frame a width and a height, or if you use sticky to force the frame to fill the space allocated to it, they will show up.
topRowFrame.grid(column=0,row=0, sticky="nsew")
This is a good illustration of why you should almost never turn geometry propagation off. Tkinter is very good at making widgets fit. When you turn that off, you need to be more careful about how you try to make them visible.
I'm trying to resize a frame in tkinter, but the width does not change and function winfo_width() returns 1. How can i fix it?
from tkinter import *
root = Tk()
root.geometry('400x300')
Frame = LabelFrame(root, text="Test", width = 200)
Frame.grid(row = 0, column = 0)
label = Label(Frame, text = '').grid(row = 0, column=0)
print(Frame.winfo_width()) #output is 1 instead of 200
root.mainloop()
The width is returning 1 because the window hasn't been drawn yet. The actual width depends on the window being drawn since the actual width depends on many factors which can't be known before the window is actually drawn.
If you call root.update() before calling Frame.winfo_width() to force the window to be drawn, you will see it displaying the actual value.
As for how to change the width, that question is too broad to answer. Normally it's not wise to directly set the width of a frame. Tkinter by default will automaticaly resize a frame to fit its children. So, one way to make the frame wider is to add more widgets.
The width can also depend on how it is added to the display - whether you're using pack or grid or place, and how you have configured them. So, another way to make the frame wider is to use non-default options that cause the frame to grow or shrink to fit the space given to it.
If you want to specify an explicit size and ignore tkinter's automatic resizing, you can do that by turning off geometry propagation and then setting the width and height parameters for the frame. Depending on whether you're using grid or pack, you can call grid_propagate or pack_propagate with a False argument to disable propagation (place doesn't support geometry propagation).
Note that turning off geometry propagation is usually the least desirable solution because it requires you to do a lot more work to create a responsive UI. The best way to design GUI with tkinter is to focus on the size of the inner widgets and let tkinter compute the most efficient size for frames and the window itself.
As the others have pointed out how to set a static size frame using grid_propagate() I will show you how to set up your frame to resize automatically.
You need to tell the row and column to expand that the frame is in. This is done with columnconfigure() and rowconfigure(). Then you need to tell the frame to stick to all sides with sticky='nsew'. Adding widgets to the frame is no different then any other container. Simply tell the widget to be in the frame.
One potention issue I see is you are overwriting Frame() on this line: Frame = LabelFrame(root, text="Test", width = 200). This is a good example why you should not use import *. Instead do import tkinter as tk and use the tk. prefix for anything that needs it.
Example:
import tkinter as tk
root = tk.Tk()
root.geometry('400x300')
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)
frame = tk.LabelFrame(root, text='Test', width=200)
frame.grid(row=0, column=0, sticky='nsew')
label = tk.Label(frame, text='label').grid(row=0, column=0)
root.mainloop()
Results:
Update:
If you do want something static make sure you define both height and width. If you only define one or the other then you will not see the frame in the window.
For a testable example for a static frame size:
import tkinter as tk
root = tk.Tk()
root.geometry('400x300')
root.rowconfigure(0, weight=1)
root.columnconfigure(0, weight=1)
frame = tk.LabelFrame(root, text='Test', height=200, width=200)
frame.grid(row=0, column=0)
frame.grid_propagate(False)
label = tk.Label(frame, text='label').grid(row=0, column=0)
root.mainloop()
Results:
Your frame can propagate on the grid based on the widgets on it, and not have fixed dimensions.
The output of 1 is due there being nothing on the Frame other than an empty Label. (It would still show 1 if there was no Label)
To get the output as 200, set the grid_propagate flag to False (only after setting your height and widht parameters), as follows:
frame = Frame(..., width=200)
frame.grid(row=0, column=0)
frame.grid_propagate(False)
I am attempting to create three frames: top, middle, and bottom. I successfully added widgets to my top and bottom frames and oriented them how I wanted them.
However, I am simply trying to add two entry widgets in the middle frame that will span across the entire width of the frame/window.
Due to the length of the code for all the widgets in the top and bottom frames, I'm just going to include a snippet of code for how my window and frames are configured:
root = Tk()
root.resizable(False, False)
top_frame = Frame(root)
middle_frame = Frame(root)
bottom_frame = Frame(root)
# I think this block is irrelavant to the question, but including it anyway just incase
rows = 0
while rows < 36:
top_frame.rowconfigure(rows, weight=1)
top_frame.columnconfigure(rows, weight=1)
bottom_frame.rowconfigure(rows, weight=1)
bottom_frame.columnconfigure(rows, weight=1)
rows += 1
top_frame.grid(row=0, column=0)
middle_frame.grid(row=1, column=0)
bottom_frame.grid(row=2, column=0)
Here is the code I'm using for the two entry widgets:
entry_1 = Entry(middle_frame)
entry_2 = Entry(middle_frame)
entry_1.grid(row=0, column=0, sticky=E+W)
entry_2.grid(row=1, column=0, sticky=E+W)
However, they just stick to the center of the middle frame. I've tried many solutions but nothing seems to change how these entry widgets look within the frame--always centered, never changing size. I even tried just packing them and setting their fill to X. I'm probably overlooking something very simple, but I can't quite figure it out.
Here is a picture for reference
The root of the problem is that the middle frame isn't configured to fill the full width of the window, so the widgets inside won't fill the full width of the window.
The first step is to use the sticky option on the middle window:
middle_frame.grid(row=1, column=0, sticky="ew")
Next, you haven't told grid what to do with extra space in the root window. As a rule of thumb any widget that uses grid to manage its children should have at least one row and one column with a weight greater than zero.
To get the middle frame to take up the full width of the window, give the column it is in a non-zero weight:
root.grid_columnconfigure(0, weight=1)
The same problem exists within the middle frame: you aren't instructing grid how to handle extra space. According to the rule of thumb we need to give column zero a weight within the middle frame:
middle_frame.grid_columnconfigure(0, weight=1)
That will allow the entry widgets in the middle frame to fill the middle frame, and we've configure the app so that the middle frame fills the full width of the window.
For the life of me, I cannot understand grid within Frame. I'm trying to create the below configuration, but I'm getting something different (highlighted area is the troublesome part).
Here is the code:
from tkinter import *
root = Tk()
weather_root = Frame(root,width=1000, height=5, bg = 'white')
weather_root.pack(side=TOP)
quote_root = Frame(root,width=1000, height =5, bg = 'white')
quote_root.pack(side=TOP)
news_root = Frame(root,width=1000, height =100, bg = 'white')
news_root.pack(side=TOP, fill= BOTH)
financial_root= Frame(root,width=1000, height =100, bg = 'white')
financial_root.pack(side=TOP, fill= BOTH)
# PROBLEM BOX
time_root = Frame(root, bg = 'yellow')
time_root.pack(side = RIGHT, fill= BOTH)
I'm very new to this still, so I'm sure it's something obvious, but what is it? (In the picture I have it split as two frames - that's the ultimate goal, but in the near term, I'm just trying to get the frame to show up against the right of the current placed frames). Thanks very much!
The expected output:
The actual output:
The pack geometry manager is not good for laying things out in a grid. Unsurprisingly, grid is the better choice. It is going to be very difficult to do what you want with pack unless you add additional frames specifically to aid in layout.
Doing this with grid is very straight-forward. It would look something like this:
weather_root.grid( row=0, column=0, sticky="nsew")
quote_root.grid( row=1, column=0, sticky="nsew")
news_root.grid( row=2, column=0, sticky="nsew")
financial_root.grid(row=3, column=0, sticky="nsew")
time_root.grid( row=0, column=1, sticky="nsew", rowspan=4)
You would also need to use root.grid_rowconfigure and root.grid_columnconfigure to apply weights to the rows and columns that should grow or shrink when the window is resized.
If you want to use pack, I recommend adding two extra frames: one for the left (gray), and one for the right (yellow). You can use pack for those two. Then, on the left you could use pack to stack the areas top-to-bottom. Whether that's the right solution in your specific case, I don't know.
Notes:
I strongly recommend grouping your calls grid or pack in this way. It's much easier to manage when they are all in one spot rather than interleaved with the other code.
I don't recommend using extra whitespace as showin in the example. I did it just to make it easier for you to see how the rows and columns relate.
For the canonical description of how pack works, see http://tcl.tk/man/tcl8.5/TkCmd/pack.htm#M26
The easiest way to accomplish the desired output would be to create two separate sub frames. You can pack the weather, quote, news and financial root frames into the left subframe, then pack the time frame into a right subframe. Last, you would pack them both into root, one using SIDE=LEFT and the other using SIDE=RIGHT. Additionally, it is possible to use Grid and Pack effectively within one app, but one individual widget (frame, for example) can only be managed using one layout manager (grid vs pack) at a time. So you can grid widgets such as frames into a frame, then pack that frame into another frame. Or, you could pack things into a subframe, then grid it into the main frame of the window.
I am doing a project at home just trying to create a window with 3(technically 4) frames.
I have an upper frame that has 2 frames inside of it(I want a left and right Frame)
then I have a lower Frame that covers everything else.
That lower frame will eventually have an external process in it, but for now an image that will not take up the full space.
The upper space will not split evenly, EVEN THOUGH I split the height and width evenly at one point.
I will send my code and show an image below.
def createFrames(self):
#Main Upper Frame
topFrame = Frame(height=120, width=800, bd=1, relief=SUNKEN)
topFrame.pack(side=TOP)
#Left Frame in Main Upper Frame
topFrameLeft = Frame(topFrame, height=120, width=400)
topFrameLeft.pack(side=LEFT)
#Right Frame in Main Upper Frame
topFrameRight = Frame(topFrame, height=120, width=400)
topFrameRight.pack(side=RIGHT)
#Frame for GPS, Lower
centerFrame = Frame(width=800, height=400, bg="",
colormap="new",bd=3, relief=GROOVE)
centerFrame.pack(side=BOTTOM, fill=BOTH, expand=True)
#photo stuff
photo = PhotoImage(file="GPS_Imitation.gif")
#scale_w = 3
#scale_h = 400/200
#photo = photo.zoom(scale_w, scale_h)
#photo = photo.subsample(1)
Image_Label = Label(centerFrame, image=photo)
Image_Label.photo = photo
Image_Label.pack(fill=BOTH, expand=True)
#Label for Left Frame
Left_Label = Label(topFrameLeft, width=56, text="Audio", bg="gray",
fg="blue")
Left_Label.pack()
#Label for Right Frame
Right_Label = Label(topFrameRight, width=60,
text="Phone/Notification",
bg="Green", fg="Black")
Right_Label.pack()
I posted the function. I had to do some weird stuff with the code to get it to do this much. but the picture won't expand, it just grays out under and above the picture. and I had to modify the topleft and topright labels in width and height at random.
Any help would be appreciated it.
This is written in Python using Tkinter!
It's hard to give a definitive answer because GUI layout really depends a lot on the specifics. What goes in the frames? How do you want them to behave when you resize? What happens if the window is too small?
If I were doing this I would probably get rid of the internal frames and just put everything in a grid since it seems that you have two columns and two or three rows. Though, that decision really depends on what else is going to be put in various rows and columns.
There's nothing wrong with using pack and extra helper frames (this is often my first choice!), grid is arguably the best tool for the job if you want the width of two columns or more columns to be identical.
Grid allows you to configure columns to be in a uniform group. Every column with the same value for the uniform attribute will be the same size. So, for example, to make sure that topFrameLeft and topFrameRight are exactly the same you can put them in a uniform group inside of topFrame.
Start by using grid to place the widgets inside of TopFrame:
topFrameLeft.grid(row=0, column=0, sticky="nsew")
topFrameRight.grid(row=0, column=1, sticky="nsew")
Next, configure the uniform columns. Note: it's a best practice to always give at least one row and one column a weight, even if you use only one row or one column.
topFrame.grid_rowconfigure(0, weight=1)
topFrame.grid_columnconfigure(0, uniform="half", weight=1)
topFrame.grid_columnconfigure(1, uniform="half", weight=1)
Note: You can continue to use pack for all the other widgets. You can freely mix and match pack, place and grid within an application as long as you don't mix them with widgets that share the same parent.