Update window layout with buttons in row with pysimplegui

Question

I'm trying to do an app with gui using PySimpleGUI.

I need to show different buttons on the window once I click "Confirm" button.

I've done this using buttons with "Visibility false" in the first layout, when i click the Confirm button the script changes the visibilty of the buttons that were initially invisibile.

The problem is that the button are visible but they are not in line but in the same column.

This is the first window:

This is the how the window updated should look:

This is how the updated window look instead:

Here's my code:

import PySimpleGUI as sg

sg.theme('DarkAmber')
layout = [
                [sg.Text('\n\nText sample', key = '_text_', visible = True)],
                [sg.Text('Second sample: ', key = '_text2_'), sg.InputText(key='_IN_', size=(10, 1))],
                [sg.Text()],

                
                [sg.Button('Confirm', key = '_CONFIRM_', visible=True), 
                sg.Button('1', key ='_1_', visible=False), 
                sg.Button('2', key = '_2_', visible=False), 
                sg.Button('3', key = '_3_',  visible=False), 
                sg.Cancel('Exit', key = '_EXIT_')],

            ]

window = sg.Window('Window', layout)


while True:            
    event, values = window.read()
    if event in (sg.WIN_CLOSED, '_EXIT_'):
        break

    elif '_CONFIRM_' in event:
        window['_text_'].Update(visible = False)
        window['_text2_'].Update('Second text updated')
        

        window['_EXIT_'].Update(visible = False)
        window['_CONFIRM_'].Update(visible = False)

        window['_1_'].Update(visible = True)
        window['_2_'].Update(visible = True)
        window['_3_'].Update(visible = True)
        window['_EXIT_'].Update(visible = True)

Do you know how to show properly the buttons in the same row? Thanks!

Answer 1

sg.pin is an element provided into a layout so that when it's made invisible and visible again, it will be in the correct place. Otherwise it will be placed at the end of its containing window/column. Replace sg.Button(...) by sg.pin(sg.button(...)) when layout.

import PySimpleGUI as sg

sg.theme('DarkAmber')
layout = [
                [sg.pin(sg.Text('\n\nText sample', key = '_text_', visible = True))],
                [sg.Text('Second sample: ', key = '_text2_'), sg.InputText(key='_IN_', size=(10, 1))],
                [sg.Text()],

                [sg.Button('Confirm', key = '_CONFIRM_', visible=True),
                sg.pin(sg.Button('1', key = '_1_', visible=False)),
                sg.pin(sg.Button('2', key = '_2_', visible=False)),
                sg.pin(sg.Button('3', key = '_3_', visible=False)),
                sg.Cancel('Exit', key = '_EXIT_')],

            ]

window = sg.Window('Window', layout)


while True:
    event, values = window.read()
    if event in (sg.WIN_CLOSED, '_EXIT_'):
        break

    elif '_CONFIRM_' in event:
        window['_text_'].Update(visible = False)
        window['_text2_'].Update('Second text updated')


        window['_EXIT_'].Update(visible = False)
        window['_CONFIRM_'].Update(visible = False)

        window['_1_'].Update(visible = True)
        window['_2_'].Update(visible = True)
        window['_3_'].Update(visible = True)
        window['_EXIT_'].Update(visible = True)

window.close()