Right-click on the container

[Klu1d]

Question

Hello, this text has been translated into Google translator.

In order for the code to work, you need to specify the path to any pdf file in the path variable, and specify the path to any image in the jpg variable.

My problem is that when I right-click on the container, I get a card that displays the buttons. These buttons are pressed when they are under the container itself. But as soon as they are at the container level, they cease to be active.

I know that the code I've written looks like a huge crutch, and if you suggest a better practice, I'll use it.

Code sample

import flet as ft
import webbrowser


def main(page: ft.Page):
    path = "your file.pdf"
    jpg = "your file.jpg"
    def right_click(e: ft.TapEvent):
        card.visible = True
        card.top = e.global_y - 200
        card.left = e.global_x
        page.update()

    def left_click(e: ft.TapEvent):
        pass

    right_panel = ft.Column(spacing=3, controls=[
        ft.FloatingActionButton(bgcolor=ft.colors.BACKGROUND, shape=ft.RoundedRectangleBorder(radius=1),
                                width=170, height=30,
                                content=ft.Row([ft.Icon(ft.icons.READ_MORE_ROUNDED), ft.Text("Read")], spacing=10)),
        ft.Divider(height=7, color="white"),
        ft.FloatingActionButton(bgcolor=ft.colors.BACKGROUND, shape=ft.RoundedRectangleBorder(radius=1),
                                width=170, height=30, mini=True,
                                content=ft.Row([ft.Icon(ft.icons.CHECK_BOX), ft.Text("Select")], spacing=10)),
        ft.FloatingActionButton(bgcolor=ft.colors.BACKGROUND, shape=ft.RoundedRectangleBorder(radius=1),
                                width=170, height=30, mini=True,
                                content=ft.Row([ft.Icon(ft.icons.CHECKLIST_OUTLINED), ft.Text("Select All")],  spacing=10)),
        ft.FloatingActionButton(bgcolor=ft.colors.BACKGROUND, shape=ft.RoundedRectangleBorder(radius=1),
                                width=170, height=30, mini=True,
                                content=ft.Row([ft.Icon(ft.icons.DELETE), ft.Text("Remove")],  spacing=10)),
        ])
        

    card = ft.Card(color=ft.colors.BACKGROUND, visible=False, content=
                ft.Container(
                content=ft.Column([right_panel]),
                width=200,
                height=250,
                padding=10,
            )
            )
        
    stack_card = ft.Stack( visible=True, controls=[card])

    

    
    check_box = ft.IconButton(visible=False, icon=ft.icons.CHECK_BOX_OUTLINE_BLANK, 
                            selected_icon=ft.icons.CHECK_BOX, 
                            icon_size=30)

    book_panel = ft.Container(alignment=ft.alignment.top_right,
                    content = ft.Column([check_box]))

    book_image = ft.Container(width = 200, height = 160,
            alignment = ft.alignment.bottom_center,
            border_radius = ft.border_radius.all(0),
            image_src = jpg,
            image_fit = ft.ImageFit.CONTAIN,
            margin = 0,
            content=book_panel
        )
    
    book_name = ft.Container(width = 200, height = 30,
            content = ft.Text("name"),
            alignment = ft.alignment.top_center,)

    
    book = ft.Container(bgcolor="red",width = 200, height = 200, ink=True,
                on_click = lambda _: webbrowser.open_new(path),
                content = ft.Column(controls = [
                        book_image,
                        book_name,
                    ]
                )
            )
    
        
    gd1 = ft.GestureDetector(
        mouse_cursor=ft.MouseCursor.CLICK,
        on_secondary_tap_down = right_click,
        on_tap_down = left_click,
        content=book,
        
    )


    page.add(gd1, stack_card)

ft.app(target=main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.