F
Filament•2w ago
bernhard

How to center filter modal footer?

I am using the filter modal and wondering how to center the footer buttons:
No description
Solution:
.fi-ta-filters-modal .fi-modal-footer-actions {justify-content: center}
.fi-ta-filters-modal .fi-modal-footer-actions {justify-content: center}
...
Jump to solution
10 Replies
toeknee
toeknee•2w ago
How did you add the buttons?
bernhard
bernhardOP•2w ago
I didnt add them. They are default behaviour of filament. Just use 
->filtersLayout(FiltersLayout::Modal)
->filtersLayout(FiltersLayout::Modal)
on your Table
bernhard
bernhardOP•2w ago
Solution
toeknee
toeknee•2w ago
.fi-ta-filters-modal .fi-modal-footer-actions {justify-content: center}
.fi-ta-filters-modal .fi-modal-footer-actions {justify-content: center}
bernhard
bernhardOP•2w ago
I am forcing most other buttons to be centered with the following in my AdminPanelProvider: 
  ->bootUsing(function () {
      Page::formActionsAlignment('center');
  })
  ->bootUsing(function () {
      Page::formActionsAlignment('center');
  })
But this doesn't help here Ok, just css. I thought there is a setting for it, I am just missing. Thanks for your help!
toeknee
toeknee•2w ago
Not that I know off, it's not a highly used feature so the alignment features likely hasnt been added.
bernhard
bernhardOP•2w ago
To be honest, this is the only design decission I hate on filament. Its not really consistend. For example, the confirmation dialog look like this (taken from the docs):
No description
bernhard
bernhardOP•2w ago
centered.... plus the action is right, while the cancel is left. Thats very inconsistent if you compare it with the filter modal for example
toeknee
toeknee•2w ago
That's because it's a request for choice, ACTION so it needs to be the focused. Modals generally are not a submit/close. It can have multiple different actions, steps etc.
bernhard
bernhardOP•2w ago
just for the records: This specific modal is a "choice" modal with just submit/close actions. And even if I have other buttons, I really dont like buttons on the left side. Its very uncommon. Most UI tools I use have it centered or right align. Nova for example have them right. But its ok, I can work around it. Thanks for your help.

Did you find this page helpful?