Why is my tkinter horizontal scrollbar squashed in the bottom, right-hand corner, but the vertical scrollbar looks normal?

Question

I'm using the code below to create two scrollbars in a tkinter window, after that I fill it with text widgets, etc.

The vertical scrollbar looks ok, and seems to be working ok (except that I can't use a mouse-wheel to scroll with it), but the horizontal scrollbar appears to be squashed into the bottom, right-hand corner of the window.

As far as I can tell, I'm setting both scrollbars up the same way, so why would the horizontal one not extend right across the bottom of the window?

# Create a main frame with a canvas so that it's possible use a scroll bar
self.current_rendered_window["main_frame"] = Frame(root)
self.current_rendered_window["main_frame"].pack(fill=BOTH, expand=1)

self.current_rendered_window["main_canvas"] = Canvas(self.current_rendered_window["main_frame"])
self.current_rendered_window["main_canvas"].pack(side=LEFT, fill=BOTH, expand=1)

self.current_rendered_window["main_scrollbar"] = ttk.Scrollbar(
    self.current_rendered_window["main_frame"],
    orient=VERTICAL, command=self.current_rendered_window["main_canvas"].yview
)
self.current_rendered_window["main_scrollbar"].pack(side=RIGHT, fill=Y)

self.current_rendered_window["horizontal_scrollbar"] = ttk.Scrollbar(
    self.current_rendered_window["main_frame"],
    orient=HORIZONTAL, command=self.current_rendered_window["main_canvas"].xview
)
self.current_rendered_window["horizontal_scrollbar"].pack(side=BOTTOM, fill=X)

self.current_rendered_window["main_canvas"].configure(
    yscrollcommand=self.current_rendered_window["main_scrollbar"].set,
    xscrollcommand=self.current_rendered_window["horizontal_scrollbar"].set
)
self.current_rendered_window["main_canvas"].bind(
    '<Configure>',
    lambda e: self.current_rendered_window["main_canvas"].configure(
        scrollregion=self.current_rendered_window["main_canvas"].bbox("all")
    )
)

self.current_rendered_window["secondary_frame"] = Frame(self.current_rendered_window["main_canvas"])
self.current_rendered_window["main_canvas"].create_window(
    (0, 0),
    window=self.current_rendered_window["secondary_frame"],
    anchor="nw"
)

In the code above current_rendered_window is a dictionary which is drawn upon every time the window is reloaded, so all frames, canvases, widgets, etc. need to be added to it as I am doing in the code.

Answer 1

You need to pack the horizontal scrollbar first:

self.current_rendered_window["main_canvas"] = Canvas(self.current_rendered_window["main_frame"], bg="yellow")

self.current_rendered_window["main_scrollbar"] = ttk.Scrollbar(
    self.current_rendered_window["main_frame"],
    orient=VERTICAL, command=self.current_rendered_window["main_canvas"].yview
)

self.current_rendered_window["horizontal_scrollbar"] = ttk.Scrollbar(
    self.current_rendered_window["main_frame"],
    orient=HORIZONTAL, command=self.current_rendered_window["main_canvas"].xview
)

self.current_rendered_window["horizontal_scrollbar"].pack(side=BOTTOM, fill=X)
self.current_rendered_window["main_canvas"].pack(side=LEFT, fill=BOTH, expand=1)
self.current_rendered_window["main_scrollbar"].pack(side=RIGHT, fill=Y)

However, better use grid() instead of pack() .