How do I add elements horizontally instead of vertically in PySimpleGUI?-CodePudding

I'm trying to get my GUI to have 2 "parts" (one left and one right), and naturally, adding elements to the layout just expands it vertically, so I tried doing a "left_part" layout and a "right_part" layout, then merge them with a Horizontal Separator padding, but it gives me something entirely different.

Ideally, I would want something like this (maybe with a thin line in between too):

What I get is this:

This is the code:

import PySimpleGUI as sg

left_part = [

    [sg.Text("Pick your favorite fruit")],
    [sg.Input(size=(25, 1), key="path")],
    [sg.FileBrowse(key="fav"), sg.Button("Submit")],
    [sg.Image(key="img1")],

    [sg.Text("Pick your favorite number")],
    [sg.Input(key="num", size=(10,10))],
    [sg.Button("Submit")],

]

right_part = [
    [sg.Text("Pick your favorite animal")],
    [sg.Input(key="animal")],
    [sg.Button("Show image of animal")],
    [sg.Image(key="img2")]
]

layout = [
    [left_part],
    [sg.HSeparator(pad=(500,0))],
    [right_part],
]

window = sg.Window("Favorites", layout)

while True:
    event, values = window.read()
    if event == "Exit" or event == sg.WIN_CLOSED:
        break

CodePudding user response：

The layout in following form left, separator and right vertically or in rows.

layout = [
    [element1],
    [sg.HSeparator(pad=(500,0))],
    [element2],
]

Should be like this

layout = [
    [element1, sg.HSeparator(pad=(500,0)), element2],
]

Since the element1 and element2 are for another complex layout, use Frame or Column element.

For horizontal layout, Instead of HSeparator, VSeparator will be used here.

For elements in Column vertical aligned top, so option vertical_alignment='top' added.

So the layout in your code maybe like this,

layout = [
    [sg.Column(left_part, vertical_alignment='top'), sg.VSeparator(), sg.Column(right_part, vertical_alignment='top')],
]