How to make dialog resizable?

[vahuynh12]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

ui.add_head_html("""
        <script src="https://unpkg.com/gsap@3.12.5/dist/gsap.min.js"></script>
        <script src="https://unpkg.com/gsap@3.12.5/dist/Draggable.min.js"></script>
    """)

ui.add_body_html("""
    <script>
        function initDraggableClass() {
            Draggable.create(".draggable", {
                type: "x,y",
                dragClickables: false,
                allowEventDefault: true,
            });
        };
        window.addEventListener("DOMContentLoaded", (event) => {
            gsap.registerPlugin(Draggable);          
            initDraggableClass();
        });
    </script>
""")

with ui.dialog().props("seamless persistent").classes("draggable") as dialog:
    with ui.card().classes("p-0 w-[20lvw]"):
        with ui.column().classes("w-full"):
            with ui.row(align_items="center").classes(
                "w-full bg-slate-400 text-white pl-2"
            ):
                ui.label("Dialog Title")
                ui.space()
                ui.button(icon="close", on_click=lambda: dialog.submit("No")).props(
                    "dense flat text-color='white'"
                )

            ui.label('Select "Yes", "No", or close the dialog.').classes("p-2")

            with ui.row().classes("w-full p-2"):
                ui.space()
                ui.button(
                    "Yes", color="positive", on_click=lambda: dialog.submit("Yes")
                )
                ui.button("No", color="negative", on_click=lambda: dialog.submit("No"))


async def show():
    ui.run_javascript("initDraggableClass();")
    result = await dialog
    ui.notify(f"You chose {result}")


ui.button("Await a dialog", on_click=show)

ui.label("Draggable Label via GSAP").classes("draggable")

ui.run()

Description

Hello,

Previously I had asked about making a dialog card draggable (#3594). The code snippet on this post is the solution I am using for that.

I am now trying to also make the dialog card resizable through a resize handle in the bottom right corner of the card. However, I am not sure how to go about this and would appreciate any advice.

Thank you!

NiceGUI Version

2.22.2

Python Version

3.11

Browser

Chrome

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @vahuynh12,

Just an idea: Maybe you can use https://interactjs.io/ instead of Draggable.js. It also supports resizing.