CODEWITHSUNDEEP
pythonpysimplegui
Another_coder
Another_coder

Reputation: 810

PySimpleGUI changing visibility breaks columns(?)

I have 2 columns and I want to reveal them on a button press by using the visibility parameter. However, it seems that columns that go from invisible to visible stop being next to each other and are instead arranged like rows.

Here is the code without the reveal, and the columns work fine:

import PySimpleGUI as sg

left_col = sg.Column([[sg.Frame('',[],background_color = '#FF0000',size = (60,40))]])
right_col = sg.Column([[sg.Frame('',[],background_color = '#00FF00',size = (60,40))]])

layout = [
    [sg.Button('reveal')],
    [left_col,right_col]]

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

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

window.close()

And here is the same code with the columns being revealed:

import PySimpleGUI as sg

left_col = sg.Column([[sg.Frame('',[],background_color = '#FF0000',size = (60,40))]],visible = False, key = 'left')
right_col = sg.Column([[sg.Frame('',[],background_color = '#00FF00',size = (60,40))]],visible = False, key = 'right')

layout = [
    [sg.Button('reveal')],
    [left_col,right_col]]

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

while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break
    if event == 'reveal':
        window['left'].update(visible = True)
        window['right'].update(visible = True)
        
window.close()

I guess my question is whether there is a workaround for this (or whether I did something wrong).

Upvotes: 0

Views: 1147

Answers (1)

Jason Yang
Jason Yang

Reputation: 13061

Elements after visible=False will miss it's location in the window, so use function pin to keep the location for element if you want to set it to be invisible.

layout = [
    [sg.Button('reveal')],
    [sg.pin(left_col), sg.pin(right_col)]]

By default, the background is the background color of theme. Of course, you can built one by yourself which with one more option bg as background_color.

Don't forget to set the background color of the Column in your layout at the same time.

def pin(elem, vertical_alignment=None, shrink=True, expand_x=None, expand_y=None, bg=None):
    if shrink:
        return sg.Column([[elem, sg.Column([[]], pad=(0,0), background_color=bg)]], background_color=bg, pad=(0, 0), vertical_alignment=vertical_alignment, expand_x=expand_x, expand_y=expand_y)
    else:
        return sg.Column([[elem]], pad=(0, 0), vertical_alignment=vertical_alignment, expand_x=expand_x, expand_y=expand_y, background_color=bg)

Then you code maybe something like this

import PySimpleGUI as sg

def pin(elem, vertical_alignment=None, shrink=True, expand_x=None, expand_y=None, bg=None):
    if shrink:
        return sg.Column([[elem, sg.Column([[]], pad=(0,0), background_color=bg)]], background_color=bg, pad=(0, 0), vertical_alignment=vertical_alignment, expand_x=expand_x, expand_y=expand_y)
    else:
        return sg.Column([[elem]], pad=(0, 0), vertical_alignment=vertical_alignment, expand_x=expand_x, expand_y=expand_y, background_color=bg)


left_col = sg.Column([[sg.Frame('',  [], background_color = '#FF0000', size = (60,40))]], background_color='blue')
right_col = sg.Column([[sg.Frame('', [], background_color = '#00FF00', size = (60,40))]], background_color='blue')

layout = [
    [sg.Button('reveal')],
    [pin(left_col, bg='blue'), pin(right_col, bg='blue')]]

window = sg.Window('Converter', layout, background_color='blue')

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

window.close()

Upvotes: 1

Related Questions