[Bug] Column doesn't expand when placed in a column with scrollable = True

[raghavsrvt]

Type of Issue (Bug)

[Bug] Column doesn't expand when placed in a column with scrollable = True

---

Operating System

Windows 10

PySimpleGUI Port (tkinter, Qt, Wx, Web)

Tkinter

---

Versions

Python version (sg.sys.version)

3.12.0

PySimpleGUI Version (sg.__version__)

4.61.0.206

GUI Version (tkinter (sg.tclversion_detailed), PySide2, WxPython, Remi)

tkinter version: 8.6.13

---

Troubleshooting

These items may solve your problem. Please check those you've done by changing - [ ] to - [X]

• Searched main docs for your problem PySimpleGUI Documenation
• Looked for Demo Programs that are similar to your goal. It is recommend you use the Demo Browser! Demo Programs
• None of your GUI code was generated by an AI algorithm like GPT
• If not tkinter - looked for Demo Programs for specific port
• For non tkinter - Looked at readme for your specific port if not PySimpleGUI (Qt, WX, Remi)
• Run your program outside of your debugger (from a command line)
• Searched through Issues (open and closed) to see if already reported Issues.PySimpleGUI.com
• Have upgraded to the latest release of PySimpleGUI on PyPI (lastest official version)
• Tried running the Development Build. Your problem may have already been fixed but not released. Check Home Window for release notes and upgrading capability
• For licensing questions please email license@PySimpleGUI.com

Detailed Description

Column doesn't expand when placed in a column with scrollable = True. Column would expand when its parent Column had scrollable=False.

Code To Duplicate

This pre-formatted code block is all set for you to paste in your bit of code:

result_layout = []
                result_name = results_window[result_event].get()
                conn_result = sqlite3.connect(resource_path(f'src\\results\\result-{result_name}.db'))
                cursor_result = conn_result.cursor()
                cursor_result.execute('SELECT name FROM sqlite_master WHERE type="table"')
                posts_for_result = cursor_result.fetchall()
                for i in posts_for_result:
                    cursor_result.execute(f'SELECT name,votes FROM {i[0]}')
                    curr_post_data = cursor_result.fetchall()
                    cursor_result.execute(f'SELECT MAX(votes) FROM {i[0]}')
                    max_votes = cursor_result.fetchone()[0]
                    cursor_result.execute(f'SELECT name FROM {i[0]} WHERE votes={max_votes}')
                    max_vote_name = cursor_result.fetchone()[0]
                    candidate_result_leyout = [[sg.Text(f'Post: {i[0]}',font=(None,18,'bold'),pad=(10,10),background_color='#FFFFFF')]] # Layout that will contain the results of candidates
                    for j in curr_post_data:

                        vote_text = sg.Text(f'{j[0]} ({j[1]} Vote)',background_color='#FFFFFF', pad=((10,5),(10,0)))
                        bar_color = ('#4E46B4','#4E46B4')
                        
                        candidate_result_leyout.extend([[vote_text],[sg.ProgressBar(j[1],size=(j[1],25),bar_color=bar_color,pad=((10,0),(0,0)))]])
                    result_layout.append([sg.Column(candidate_result_leyout,expand_x=True,size=(100,len(curr_post_data)*60+70),background_color='#FFFFFF',pad=(10,10))])

                show_results_window = sg.Window(f'{results_window[result_event].get()} Results',[[sg.Column(result_layout,expand_y=True,expand_x=True,scrollable=True,vertical_scroll_only=True)]],size=(550,500),resizable=True,modal=True)
                while True:
                    event, values = show_results_window.read() 
                    if event==sg.WIN_CLOSED:
                        break
                show_results_window.close()

Screenshot, Sketch, or Drawing

scrollable=True

scrollable=False

---

Watcha Makin?

I am making an e-voting software for my school

[jason990420]

It looks like that it is same as the issue #6766, or #5770 (comment)

I reduce your code and make it executable as following.

import PySimpleGUI as sg

sg.theme("DarkBlue")

engines = ["Google", "Bing", "Perplexity.ai", "You.com", "Yep.com", "Openverse"]
result_layout = []
for i in engines:
    candidate_result_layout = [[sg.Text(f'Post: {i}')]]
    for j in range(3):
        vote_text = sg.Text(f'{j} Vote)')
        candidate_result_layout += [[vote_text], [sg.ProgressBar(j, size=(j, 25), bar_color=('#4E46B4', '#4E46B4'))]]
    result_layout.append([sg.Column(candidate_result_layout, expand_x=True, size=(100, 130), background_color='#FFFFFF')])
layout = [[sg.Column(result_layout, expand_y=True, expand_x=True, scrollable=True, vertical_scroll_only=True, key="COLUMN")]]
window = sg.Window(f'Results', layout, resizable=True, finalize=True)

window.set_size((550, 200))
window.refresh()
window.move_to_center()

while True:
    event, values = window.read()

    if event==sg.WIN_CLOSED:
        break

window.close()

After the workaround applied

import PySimpleGUI as sg

def configure_canvas(event, canvas, frame_id):
    canvas.itemconfig(frame_id, width=canvas.winfo_width())

def configure_frame(event, canvas):
    canvas.configure(scrollregion=canvas.bbox("all"))

sg.theme("DarkBlue")

engines = ["Google", "Bing", "Perplexity.ai", "You.com", "Yep.com", "Openverse"]
result_layout = []
for i in engines:
    candidate_result_layout = [[sg.Text(f'Post: {i}')]]
    for j in range(3):
        vote_text = sg.Text(f'{j} Vote)')
        candidate_result_layout += [[vote_text], [sg.ProgressBar(j, size=(j, 25), bar_color=('#4E46B4', '#4E46B4'))]]
    result_layout.append([sg.Column(candidate_result_layout, expand_x=True, size=(100, 130), background_color='#FFFFFF')])
layout = [[sg.Column(result_layout, expand_y=True, expand_x=True, scrollable=True, vertical_scroll_only=True, key="COLUMN")]]
window = sg.Window(f'Results', layout, resizable=True, finalize=True)

column = window['COLUMN'].widget
frame_id, frame, canvas = column.frame_id, column.TKFrame, column.canvas
canvas.bind("<Configure>", lambda event, canvas=canvas, frame_id=frame_id:configure_canvas(event, canvas, frame_id))
frame.bind("<Configure>", lambda event, canvas=canvas:configure_frame(event, canvas))
window.set_size((550, 200))
window.refresh()
window.move_to_center()

while True:
    event, values = window.read()

    if event==sg.WIN_CLOSED:
        break

window.close()

[raghavsrvt]

Thanks for the solution, could you please explain the code as I am unable to understand and also why does this problem occur?

[raghavsrvt]

I got error NoneType object has no attribute frame_id
The code-

show_results_window = sg.Window(f'{results_window[result_event].get()} Results',[[sg.Column(result_layout,expand_y=True,expand_x=True,scrollable=True,vertical_scroll_only=True, key='result_container')]],size=(550,500),resizable=True,modal=True)
                
                # Code to fix columns in result_layout not expanding
                column = show_results_window['result_container'].widget
                frame_id, frame, canvas = column.frame_id, column.TKFrame, column.canvas
                canvas.bind("<Configure>", lambda event, canvas=canvas, frame_id=frame_id:configure_canvas(event, canvas, frame_id))
                frame.bind("<Configure>", lambda event, canvas=canvas:configure_frame(event, canvas))
                show_results_window.set_size((550, 200))
                show_results_window.refresh()
                show_results_window.move_to_center()

[jason990420]

AttributeError: 'NoneType' object has no attribute 'frame_id'

One extra option missed in your sg.Window, finalize=True.

Why element inside a scrollable Column not expanded ?

It is caused by that the scrollable Column is built with the tkinter Canvas widget, and the child elements/widgets are created inside the window which is on the canvas and no expand function.
So we need to adjust the size of the Canvas and the window/frame by ourself when related GUI configured event happened.

[raghavsrvt]

I again got this error, (PSG 4.61.0.206)

[jason990420]

Maybe you forgot those two functions defined in the beginning

import PySimpleGUI as sg

def configure_canvas(event, canvas, frame_id):
    canvas.itemconfig(frame_id, width=canvas.winfo_width())

def configure_frame(event, canvas):
    canvas.configure(scrollregion=canvas.bbox("all"))

[raghavsrvt]

Oh yes, sorry that I disturbed you because of my silly mistake.