[Bug] Column -> Row -> Column breakes expand_x=True

[filomassa]

Writing a layout that contains a Column(expand_x=True) which contains a row with another Column(expand_x=True) brakes the space calculations of the inner column. I noticed this since I wanted to make a first column making it work as a container element, and then putting inside a row whith an Image and another Column to put other elements beside the image and make them occupy all the space available but they simply don't.

This is the code I was tampering with.

import FreeSimpleGUI as sg

sg.theme("Reddit")

searchFilterValues = ["Titolo", "Artista", "Album"]

bottomBarBgColor = sg.theme_input_background_color()

# Define the window's contents
layout1 = [
    [sg.Input(expand_x=True), sg.Combo(values=searchFilterValues, default_value=searchFilterValues[0], readonly=True), sg.Button(button_text="Cerca", size=(5,1))],
    [sg.Table(
        expand_x=True,
        expand_y=True,
        row_height=18,
        auto_size_columns=False,
        col_widths=[20, 20, 10, 3],
        cols_justification=["l", "l", "l", "r"],
        alternating_row_color=bottomBarBgColor,
        headings=["Titolo", "Album", "Artista", "Durata"],
        values=[
            ["Applause", "Pop", "Lady Gaga", "3:20"],
            ["Fine Line", "Fine Line", "Harry Styles", "2:54"]
        ]
    )]
]

layout2 = [
    [sg.Input(expand_x=True)],
    [sg.Text(text="Tab 2")]
]

layout3 = [
    [sg.Input(expand_x=True)],
    [sg.Text(text="Tab 3")]
]

layoutMusicReproducer = [
    [sg.Image(size=(90,90), source="./Images/default_resized.png"), sg.Column(layout= [
        [sg.Text("Riproduci qualcosa", background_color=bottomBarBgColor, expand_x=True), sg.Button("Play"), sg.Button("Next")],
        [sg.Text("Album - Artista", background_color=bottomBarBgColor, auto_size_text=False)],
        [sg.Slider(range=(0,100), expand_x=True, disable_number_display=True, orientation="h")]
    ], background_color=bottomBarBgColor)]
]

tabLayout = [
    [sg.Tab(layout=layout1, title="Cerca"), sg.Tab(layout=layout2, title="Album"), sg.Tab(layout=layout3, title="Playlist")],
]

layout = [
    [sg.TabGroup(tabLayout, expand_x=True, expand_y=True)],
    [sg.Column(layout=layoutMusicReproducer, size=(200, 100), expand_x=True, background_color=bottomBarBgColor)]
]

# Create the window
window = sg.Window('MyMusic Local 0.1', layout, resizable=True, size=(800, 500))

# Display and interact with the Window using an Event Loop
while True:
    event, values = window.read()
    # See if user wants to quit or window was closed
    if event == sg.WINDOW_CLOSED or event == 'Quit':
        break

# Finish up by removing from the screen
window.close()

And this is the result:

Notice that removing the inner column makes expand_x works again as intednded. Here is what i mean:

layoutMusicReproducer = [
    [sg.Text("Riproduci qualcosa", background_color=bottomBarBgColor), sg.Push(), sg.Button("Play"), sg.Button("Next")],
    [sg.Text("Album - Artista", background_color=bottomBarBgColor)],
    [sg.Slider(range=(0,100), expand_x=True, disable_number_display=True, orientation="h")]
]

tabLayout = [
    [sg.Tab(layout=layout1, title="Cerca"), sg.Tab(layout=layout2, title="Album"), sg.Tab(layout=layout3, title="Playlist")],
]

layout = [
    [sg.TabGroup(tabLayout, expand_x=True, expand_y=True)],
    [sg.Column(layout=[[sg.Image(source="./Images/default_resized.png", size=(90, 90))]], background_color=bottomBarBgColor), sg.Column(layout=layoutMusicReproducer, expand_x=True)]
]

I work as a software developer myself and I think that usign expand_x and expand_y to make a sort of responsive layout in FreeSimpleGui adds a great value to the library, enabling developers to build really complex layouts.

I also noticed that on the old PySimpleGui repository theres a similar issue solved (as a workaround) by using the repack function:
Here is the link: PySimpleGUI/PySimpleGUI#6132