How can I put 2 buttons next to each other?

Question

b = Button(root, text="Enter", width=10, height=2, command=button1)
b.config()
b.pack(side=LEFT)

c = Button(root, text="Clear", width=10, height=2, command=clear)
c.pack(side=LEFT)


scrollbar = Scrollbar(root)
scrollbar.pack(side=RIGHT, fill=Y)
text.config(width=35, height=15)
text.pack(side=RIGHT, fill=Y)
scrollbar.config(command=text.yview)
text.config(yscrollcommand=scrollbar.set)

How can I put these 2 buttons next to each other ontop of the text widget? when I set "side=LEFT" it just puts the 2 buttons next to the text widget

Answer 1

There are typically two solutions to this type of problem. Neither is better than the other in all circumstances, or in this particular example. Both solutions are perfectly acceptable.

Solution 1: use two containers (typically, frames). One to hold horizontal items, one to hold vertical items. In this case the root window can serve as the container for the vertically stacked items. Place the two buttons in the horizontal frame (using pack(side=LEFT)), then put that frame above the text widget (using pack(side=TOP)).

Solution 2: use the grid geometry manager, which lays out your UI in a grid. Place the buttons in cells 0,1 and 0,2, and the text widget in 1,1 spanning two columns.

Typically, using grid requires a bit more up-front planning. You have to figure out which items need to span columns or rows, which columns or rows should grow and shrink as the widget is re-sized, etc. The pack solution is "easiest" (for some definitions of "easy", anyway) for very simple layouts such as this.

The general technique of using frames to contain groups of widgets is a good one. It makes it easy to manage whole sets of widgets as a group. and to mix and match left-to-right groups of widgets and top-to-bottom groups of widgets.

This is how I would do it using the multiple-frames technique. Notice how I create the widgets as children of root rather than children of the inner frames. This makes it a bit easier to modify the layout in the future, since all you have to do is create or remove various frames without having to modify the widget hierarchy.

# create the main sections of the layout, 
# and lay them out
top = Frame(root)
bottom = Frame(root)
top.pack(side=TOP)
bottom.pack(side=BOTTOM, fill=BOTH, expand=True)

# create the widgets for the top part of the GUI,
# and lay them out
b = Button(root, text="Enter", width=10, height=2, command=button1)
c = Button(root, text="Clear", width=10, height=2, command=clear)
b.pack(in_=top, side=LEFT)
c.pack(in_=top, side=LEFT)

# create the widgets for the bottom part of the GUI,
# and lay them out
text = Text(root, width=35, height=15)
scrollbar = Scrollbar(root)
scrollbar.config(command=text.yview)
text.config(yscrollcommand=scrollbar.set)
scrollbar.pack(in_=bottom, side=RIGHT, fill=Y)
text.pack(in_=bottom, side=LEFT, fill=BOTH, expand=True)

A naive implementation using grid is below. It has a different resize behavior which may or may not be what you want. It really depends on the resize behavior that you desire. Usually I'll manage a row of controls with a frame, then use grid to lay it out along with the other widgets. In this example I'll just use grid for everything.

Notice how in addition to managing which row(s) and column(s) a widget is in, you have to decide on a weighting factor for rows and columns. At a minimum you need to pick one row and one column to "pick up the slack", which usually means whatever column your primary widget is in (read: usually a text, canvas, or another frame) is in.

b = Button(root, text="Enter", width=10, height=2, command=button1)
c = Button(root, text="Clear", width=10, height=2, command=clear)
b.grid(row=0,column=0, sticky=W)
c.grid(row=0,column=1, sticky=W)

textframe = Frame(root)
textframe.grid(in_=root, row=1, column=0, columnspan=3, sticky=NSEW)
root.columnconfigure(0, weight=1)
root.rowconfigure(1, weight=1)

text = Text(root, width=35, height=15)
scrollbar = Scrollbar(root)
scrollbar.config(command=text.yview)
text.config(yscrollcommand=scrollbar.set)
scrollbar.pack(in_=textframe, side=RIGHT, fill=Y)
text.pack(in_=textframe, side=LEFT, fill=BOTH, expand=True)

In this specific case I'd choose the first method, the one with pack. For more complex designs I'll almost always use a mix of both grid and pack. Use pack for items that naturally stack either horizontally or vertically (such as toolbars). Use grid for more complex layouts (such as the whole app, widgets with scrollbars, dialogs, etc). You can't use both grid and pack for the same container, but you can use pack for one container, grid for another, etc.