GridView: Child container that has Image, makes other container child controls non-clickable

[jnsh]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

If GridView has a child container, and in that container is a clickable control (e.g. Dropdown, Button) and an Image, the clickable control can not be clicked. If the Image is removed, clicking works as expected.

This only happens when either runs_count or max_extent options are set on GridView.

Also I could not reproduce this if GridView is changed to Row

Code sample

Code

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.GridView(
            runs_count=3,
            max_extent=150,

            controls=[
                ft.Column(
                    controls = [
                        ft.Image(
                            src="https://picsum.photos/150/150?1",
                            fit=ft.ImageFit.CONTAIN,
                        ),
                        ft.Dropdown(
                            label="Non clickable in Column with Image",
                            options=[
                                ft.dropdown.Option("aaaaaaa"),
                                ft.dropdown.Option("eeeeeee"),
                                ft.dropdown.Option("ooooooo"),
                            ],
                        ),
                    ]
                ),
                ft.Column(
                    controls = [
                        ft.Image(
                            src="https://picsum.photos/150/150?1",
                            fit=ft.ImageFit.CONTAIN,
                        ),
                        ft.ElevatedButton(text="Non clickable in Column with Image"),
                    ]
                ),
                ft.Column(
                    controls = [
                        ft.Dropdown(
                            label="Clickable in Column",
                            options=[
                                ft.dropdown.Option("aaaaaaa"),
                                ft.dropdown.Option("eeeeeee"),
                                ft.dropdown.Option("ooooooo"),
                            ],
                        ),
                    ]
                ),
                ft.Column(
                    controls = [
                        ft.ElevatedButton(text="Clickable in Column"),
                    ]
                ),
                ft.Dropdown(
                    label="Clickable out of Column",
                    options=[
                        ft.dropdown.Option("aaaaaaa"),
                        ft.dropdown.Option("eeeeeee"),
                        ft.dropdown.Option("ooooooo"),
                    ],
                ),
                ft.ElevatedButton(text="Clickable out of Column"),
            ],
        )
    )

ft.app(main)

If runs_count or max_extent options are removed, or ft.GridView is changed to e.g. ft.Row, the issue disappears

To reproduce

1. Add GridView with either runs_count or max_extent options set
2. In GridView, add e.g. Column as child control
3. In the Column, add Image, and Button or other clickable control
4. Button can not be clicked

Expected behavior

Clickable controls should always work as GridView children

Screenshots / Videos

Operating System

Linux

Operating system details

Rocky Linux 9.3

Flet version

0.26.0

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

No response

Additional details

No response

[ndonkoHenri]

It happens because the size/height of the controls in your column is bigger than the grid's max_extent. The image in your columns has a size of 150px height (from your picsum link), which is the grid's max_extent. This implies, the image takes the whole clickable space (though the controls below it are still visible).

If you place the button/dropdown above the image you will notice that they are clickable, as they will be in the clickable region provided to it by the grid/column.

To fix your issue, you can do the following:

• reduce the size of your image, so the button/dropdown can fit into the clickable region;
• increase the grid's max_extent to provide sufficient room/space for the columns and their descendant controls. For the code example you provided, I found values of max_extent >= 187 to work.

[jnsh]

Thank you for the answer! I figured this was likely something to do with the control exceeding grid item's extent, but that was not the behavior I would have expected. I imagined GridView could calculate the necessary item height/aspect ratio that was necessary to fit every child on the grid, but no I see the children will always have a fixed aspect ratio, which is 1.0 by default.

For my intended use case, I would have needed to be able to change the child height more dynamically, so I may just swap GridView to ft.Row, or think of a different approach.

Either way, if anyone else has similar situation, setting expand=True to the Image makes it resize so that it's siblings fit the child container., which fixes the issue I was having in some sense. Also, adding width=float("inf") and playing with the fit= on the Image might be useful, as well as child_aspect_ratio= on the GridView.