spyoungtech / spyoungtech/FreeSimpleGUI

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

Open
#74 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
867
Forks
106
Avg merge
1m
Merged PRs (30d)
2

Description

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:

Image

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)]
]

Image

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: https://github.com/PySimpleGUI/PySimpleGUI/issues/6132

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the supplied FreeSimpleGUI example and compare the nested Column(expand_x=True) layout with the flattened workaround. Trace the space calculation for the inner Column and verify that it expands beside the Image while retaining the expected behavior of the surrounding layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.