1

I just got started using Tkinter and I'm facing a weird problem, basically, I want my app to look something like this

enter image description here

So in order to do that, I created two Frames, one for menu items and the other one to display the content. Strange thing, when I initialize the frames with the given width and height the program seems to work as expected, but when I put some widgets inside the window resizes, it looks like this

enter image description here

Could somebody please explain this weird behaviour to me? What am I missing? Also, I would like to mention that when I add the buttons to the menu frame the width changes to fit the button width, not vice versa as I would like

app = tk.Tk()
app.resizable(False, False)

menu_frame_users = tk.Frame(app, width=200, background='red')
content_frame = tk.Frame(app, height=600, width=600, background='blue')


hello_label = tk.Label(menu_frame_users, text='Hello, User').grid(column=0, row=0, sticky='we')
view_profile_button = tk.Button(menu_frame_users, text="View Profile").grid(column=0, row=1, sticky='we')
invoices_button = tk.Button(menu_frame_users, text="Invoices").grid(column=0, row=2, sticky='we')
bookings_button = tk.Button(menu_frame_users, text="View bookings").grid(column=0, row=3, sticky='we')
tools_button = tk.Button(menu_frame_users, text="Search tools").grid(column=0, row=4, sticky='we')

test_label = tk.Label(content_frame, text='View profile')
test_label.grid(column=0, row=0, sticky='we')


menu_frame_users.grid(column=0, row=0, sticky='nswe')
content_frame.grid(column=1, row=0, sticky='nswe')
Terchila Marian
  • 2,225
  • 3
  • 25
  • 48
  • Does this answer your question? [Setting a Frame Size and Location in Tkinter](https://stackoverflow.com/questions/14922937/setting-a-frame-size-and-location-in-tkinter) – AAM111 Nov 26 '19 at 00:09

2 Answers2

1

The frames in tkinter will only be as big as the widgets contained within unless you add weight to row and columns to make them expand.

You can get the frame to expand by setting the size of the window and then adding weight to the appropriate row and column.

    app.geometry('500x400')
    app.grid_columnconfigure(1, weight=1)
    app.grid_rowconfigure(0, weight=1)

You can play around with the size of the window and then resize and position your buttons until you get the layout you want.

You can also use:

    app.grid_columnconfigure(1, minsize=300)

However this only applies when the column contains a widget.

Rhys Flook
  • 185
  • 8
1

I'm not sure if I fully understand the question, but maybe this will help. Note I removed the explicit frame dimensions for the sake of the example. 

import tkinter as tk

app = tk.Tk()
app.resizable(False, False)

menu_frame_users = tk.Frame(app,background='red')
content_frame = tk.Frame(app, background='blue')

app.geometry("500x500")

app.rowconfigure(0, weight=1)
app.columnconfigure(0, weight=1)
menu_frame_users.columnconfigure(0, weight=1)

hello_label = tk.Label(menu_frame_users, text='Hello, User').grid(column=0, row=0, sticky='we')
view_profile_button = tk.Button(menu_frame_users, text="View Profile").grid(column=0, row=1, sticky='we')
invoices_button = tk.Button(menu_frame_users, text="Invoices").grid(column=0, row=2, sticky='we')
bookings_button = tk.Button(menu_frame_users, text="View bookings").grid(column=0, row=3, sticky='we')
tools_button = tk.Button(menu_frame_users, text="Search tools").grid(column=0, row=4, sticky='we')

test_label = tk.Label(content_frame, text='View profile')
test_label.grid(column=0, row=0, sticky='we', padx=20, pady=20)


menu_frame_users.grid(column=0, row=0, sticky='nswe')
content_frame.grid(column=1, row=0, sticky='nswe')

app.mainloop()

Documentation for tkinter is a bit limited but there's some great info regarding grid configuration on this page.

Generally speaking, the widgets in a given container are what give the container it's dimensions, unless explicitly coded otherwise. (In other words, the frame will grow as you add things into it, not the other way around)

In your example, I added an arbitrary window size (you can also specify an offset in that string argument). My guess is you're looking for rowconfigure() and columnconfigure(). Also, you can add some padding to space things out with .grid()

I almost exclusively use the grid geometry manager, but sometimes you might find it more pragmatic to use pack() or place(), just make sure you don't use both at the same time.

Cheers.

Times
  • 27
  • 3