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.09k stars 2.83k forks source link

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

Closed uqjohart closed 10 months ago

uqjohart commented 10 months ago

Package

filament/filament

Package Version

3.0

Laravel Version

10.10

Livewire Version

3.1

PHP Version

8.1

Problem description

Note: I had to make a new ticket as the gitbot closed my other one without a repo link and I cant seem to reopen it. https://github.com/filamentphp/filament/issues/9468

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

  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

If using Sail:

  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 Add ./vendor/bin/sail to the start of each command below in 'the main part'

If not using sail:

  1. Setup your own database
  2. Setup your own host/ports
  3. Setup your own application directory
  4. Download the repo

The main part:

  1. Create an .env file
  2. Generate an application key php artisan key:generate
  3. Install the composer dependencies: composer install
  4. Install the NPM dependencies: npm install
  5. Run the builder: npm run build
  6. Create database: phpl artisan migrate:fresh --seed
  7. In your browser go to http://localhost/admin
  8. Log in with 'admin@none.com' 'password'
  9. Navigate to http://localhost/admin/roles/1/edit
  10. Click the toggle columns button on the relation manager. NOTE: This will work correctly as there are many records in the relation
  11. Navigate to http://localhost/admin/roles/2/edit
  12. 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. bug

Reproduction repository

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

Relevant log output

No response

github-actions[bot] commented 10 months 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.

zepfietje commented 10 months ago

This is a tricky issue, and not much we can do I think. The best solution is probably to set a max height on the columns dropdown if you're expecting it to be too tall, using columnToggleFormMaxHeight().

Give it a try, and let me know if you still run into any issues.