Skip to content

Toggle acting weird in modal with y-overflow #1850

@romrom21

Description

@romrom21

Description

When I click on a toggle that I needed to scroll to reach, the modal container will do something really weird.
The more I need to scroll to reach the toggle, the more impacted the page will be

Image

Minimal Reproduction

<Modal open={true} class="max-h-[150px]">
    <Toggle class="pt-[300px]"></Toggle>
</Modal>

Steps to Reproduce

Create a modal with scrollable content.
Place a Toggle in the scrollable area.
Click on the toggle, your modal willresize weirdly.

Environment

flowbite 4.0.1
flowbite-svelte 1.28.1
svelte 5.35.2
  
System:
    OS: Windows 11 10.0.26100
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
    Memory: 12.74 GB / 31.46 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.4.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 142.0.7444.176
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.1882

Relevant Logs / Console Output

Screenshots / GIF (optional)

No response

Additional Context (optional)

No response

Checklist

  • I have searched existing issues and discussions
  • I have provided a minimal and runnable reproduction
  • I am using the latest version of Flowbite-Svelte

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions