How to align items with "side=BOTTOM"/"anchor=S" properly?

Question

I have a GUI app in which i have a BOTTOM scrollbar and a BOTTOM status bar, both at the bottom. I want to align them in such a way that scrollbar comes above the status bar at bottom like this ( in official notepad ) :

Here statusbar is at bottom and scrollbar is at top.

However what i made is :

Here statusbar is at top and scrollbar is at bottom.

I also tried anchor=S but that also didn't worked and throwed the same result.

CODE : ( Status Bar )

    statusbar = Frame(textarea)
    statusbar.pack(side=BOTTOM, fill=X)
    statusbar_Content1 = Label(statusbar, anchor=SW, width=18, text="Ln 1, col 1")
    statusbar_Content2 = Label(statusbar, anchor=SW, text="100%")
    statusbar_Content3 = Label(statusbar, anchor=SW, width=15, text="Windows (CRLF)")
    statusbar_Content4 = Label(statusbar, anchor=SW, width=13, text="UTF-8")
    statusbar_Content4.pack(side=RIGHT)
    Label(statusbar, anchor=SW, text="|", state=DISABLED).pack(side=RIGHT)
    statusbar_Content3.pack(side=RIGHT)
    Label(statusbar, anchor=SW, text="|", state=DISABLED).pack(side=RIGHT)
    statusbar_Content2.pack(side=RIGHT)
    Label(statusbar, anchor=SW, text="|", state=DISABLED).pack(side=RIGHT)
    statusbar_Content1.pack(side=RIGHT)
    Label(statusbar, anchor=SW, text="|", state=DISABLED).pack(side=RIGHT)

CODE : ( Scroll Bar )

Scroll2 = Scrollbar(root, orient=HORIZONTAL)
Scroll2.pack(side=BOTTOM, fill=X)
Scroll2.config(command=textarea.xview)

CODE : ( Scrollbar is bound with Text widget )

textarea = Text(root, font=fontsmain, yscrollcommand=Scroll.set,xscrollcommand=Scroll2.set, undo=True)
textarea.pack(expand=True, fill=BOTH)

CONCLUSION :

Is there any way of setting these such that SCROLLBAR come above STATUSBAR and vise versa ?

Answer 1

pack works by placing a widget on one side of unallocated space. That means that the results are dependent on the order that widgets are packed. This is called the stacking order.

For example, if you pack the scrollbar first, it will be placed at the very bottom of the window since no space has yet been allocated to anything. When you later call pack on the statusbar, the very bottom of the window has already been allocated so it will be placed at the bottom of the free space above the scrollbar.

Knowing this, when you change the order in which you call pack, you change the order in which the widgets appear in the window. So, a simple solution is to make sure you pack the statusbar before you pack the scrollbar.

pack also has options that let you specify whether a widget is before or after some other widget in the ordering. For example, you can pack the scrollbar and then pack the statusbar but tell it to appear before the scrollbar in the stacking order. When you are using side='bottom', that will result in the statusbar appearing below the scrollbar.

Notice the difference between the following three examples:

statusbar.pack(side="bottom", fill="x")
scrollbar.pack(side="bottom", fill="x")

scrollbar.pack(side="bottom", fill="x")
statusbar.pack(side="bottom", fill="x")

scrollbar.pack(side="bottom", fill="x")
statusbar.pack(side="bottom", fill="x", before=scrollbar)