search

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
18.98k stars 2.93k forks source link

RelationManager toggaleable() with many columns renders offscreen. #9468

Closed uqjohart closed 1 year ago

uqjohart commented 1 year ago

Package

filament/filament

Package Version

3.0

Laravel Version

10.10

Livewire Version

3.0

PHP Version

8.1

Problem description

When using a relation manager with many columns that use toggleable(), the widget draw sometimes renders vertically off the screen and is unusable. It appears to only be an issue when the widget button is close the the bottom of the page so it tries to render the draw upward and off screen.

Expected behavior

Either:

  1. The top of the draw should never go above the top of the page (or the bottom of the header if using the ->topNavigation()
  2. If the panel is taller than the viewport, split into multiple columns.
  3. Allow for the toggles to appear in a modal window with multiple columns.

Steps to reproduce

  1. Download the repo
  2. Change directory to the root
  3. Create a sail/docker instance: ./vendor/bin/sail up -d
  4. Start docker: ./vendor/bin/sail start
  5. Install the composer dependencies: ./vendor/bin/sail composer install
  6. Install the NPM dependencies: ./vendor/bin/sail npm install
  7. Run the builder: ./vendor/bin/sail npm run build
  8. Create database: ./vendor/bin/sail artisan migrate:fresh --seed
  9. In your browser go to http://localhost/admin
  10. Log in with 'admin@none.com' 'password'
  11. navigate to http://localhost/admin/roles/1/edit
  12. Click the toggle columns button on the relation manager. NOTE: This will work correctly as there are many records int eh relation
  13. navigate to http://localhost/admin/roles/2/edit
  14. Click the toggle columns button on the relation manager. NOTE: This will show the breakage as there are few records but many columns. The toggle columns button will not snap to it's lower position and the top controls are inaccessable.

Reproduction repository

git@github.com:uqjohart/filamentphp-issue-9468.git

Relevant log output

No response

github-actions[bot] commented 1 year ago

Hey @uqjohart! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

uqjohart commented 12 months ago

I have updated this ticket with a repo git@github.com:uqjohart/filamentphp-issue-9468.git