Stretch grid table row so that column actions sit at the bottom
When a table is displayed as a grid using
contentGrid(), if the heights of each row box differs, the footer actions will stick to the bottom of the content, rather than sitting flush with the bottom of the box.
The obvious solution is to set the inner div immediately .fi-ta-record that wraps the row to flex h-full items-stretch (default is flex items-center)
Is there a better way to apply these classes, than just manually targeting .fi-panel-app .fi-dashboard-page .fi-ta-record > div with height: 100%; align-items: stretch?
It doesn't appear to be possible to target this container with extraAttributes.15 Replies
@Zep Fietje sorry for the @ spam, but based on your response to Lara Zeus in the other channel, I'd guess that targeting the Filament CSS selectors in this case would be the "official" solution?
Is there a reason that the footer actions aren't locked to the bottom of the "row" box by default? when tables are displayed as a grid.
For reference, default behaviour:
Fix
This might actually be a bug @Tetracyclic: https://github.com/filamentphp/filament/issues/11814
Let me know if you think it's not related though 🙂
In the case of using
contentGrid, I think it would be fixed by this line: https://github.com/filamentphp/filament/blob/4ec3145bbc27c7a6f32738e362eef4ed6a2b72f5/packages/tables/resources/views/index.blade.php#L527
Being replaced with:
But that may just be a naive fix for the problem I'm encountering, and could have knock on effects I'm not anticipating.
I'll test whether the behaviour is the same when a ->url() is set on the row.
Yeah, my suggested fix wouldn't solve #11814, as the anchors still aren't stretched to full height and as they wrap each individual column, there's lots of dead space that isn't linked around them, rather than the whole record being a link when ->url() is set on the row.Feel free to create a PR for the fix that resolves your issue though
If it fixes tables with
contentGrid that's great already
Then I'll handle the original issue for regular tables 🙂Sure, will test it out properly and then open a PR when I get a chance
Any chance that PR has been submitted? I'm getting the same problem
Apologies, I never got around to it.
Does the following fix work for you:
(You'll probably need to change the leading classes to target the table in question)
Tanks a lot! That worked for me
Please still consider creating a PR if this improves the core design 🙂
@Zep Fietje I'll put a PR together now, but I've not had time to test it properly, it's only a small change
GitHub
Fix footer actions on content grid not aligning to the base of the ...
When a table is displayed as a grid using contentGrid(), if the heights of each row box differs, the footer actions will stick to the bottom of the content, rather than sitting flush with the botto...
Thanks, @Ross Bearman!