How do I make a resizeable window with a sidepanel and content area? How do I make a resizeable window with a sidepanel and content area? tkinter tkinter

How do I make a resizeable window with a sidepanel and content area?


TL;DR: use fill="both" for the sidebar.

Overview of the problem

The extra space you are seeing belongs to the sidebar. Because you use expand=true for both widgets, they each are given part of the extra space when you resize the window. Since you didn't specify fill In the "x" direction for the sidebar, it's being given some of the extra space but it is not filling it. It is filling it in the "y" direction, just as you asked, and the main area is completely filling its space since it has fill="both".

You need to either have the sidebar fill in both the "x" and "y" dimension, or turn expand off to have it be a fixed size. Note: when I say "fixed size", it will still fill the area it is given if you use fill=both, but when you resize the window, all extra space will go to the main window.

Using a fixed size sidebar

To have a fixed size sidebar, turn expand off but set fill to be both. You want it to fill the area that was allocated to it, but you don't want that area to grow if the window gets bigger:

import Tkinter as tkroot = tk.Tk()# sidebarsidebar = tk.Frame(root, width=200, bg='white', height=500, relief='sunken', borderwidth=2)sidebar.pack(expand=False, fill='both', side='left', anchor='nw')# main content areamainarea = tk.Frame(root, bg='#CCC', width=500, height=500)mainarea.pack(expand=True, fill='both', side='right')root.mainloop()

Using an expanding sidebar

To have a flexible-sized sidebar, turn expand on so that it will be given part of the extra space when you resize the window. You want fill to be both so that it fills the space that it is given.

import Tkinter as tkroot = tk.Tk()# sidebarsidebar = tk.Frame(root, width=200, bg='white', height=500, relief='sunken', borderwidth=2)sidebar.pack(expand=True, fill='both', side='left', anchor='nw')# main content areamainarea = tk.Frame(root, bg='#CCC', width=500, height=500)mainarea.pack(expand=True, fill='both', side='right')root.mainloop()

Summary

The only difference between the two examples is the use of expand=True or expand=False. expand controls what happens to any extra space when the window resizes. When true, extra space is allocated to the widget, along with any other widgets that have expand set to true. In both cases, however, you want the sidebar to completely fill the area it has been given. So in both cases you want fill="both". fill only determines what the widget does with the area it has been given (fill it or not), but has no bearing on whether the widget gets more or less space that it asks for.

  • expand: whether the widget is given more space as the window resizes
  • fill: whether the widget fills the space it is given, or whether part of the space is left empty