How do I make EditProfile.php use more width please?
I am using custom editprofile.php with Filament panel. The EditProfile page is using small width, Please let me know how do I increase the width of that form please.
Thank you
4 Replies
The
EditProfile page extends SimplePage layout:
https://github.com/filamentphp/filament/blob/27eb96920c15528e350ce78ee5b92063945566ff/packages/panels/src/Pages/Auth/EditProfile.php#L33
... which has a getMaxWidth() function, which can be used to change it to something specific instead of the default null as defined a bit above the function:
https://github.com/filamentphp/filament/blob/27eb96920c15528e350ce78ee5b92063945566ff/packages/panels/src/Pages/SimplePage.php#L20
The template for the SimplePage layout defaults to sm:max-w-lg when the maxWidth is set to null:
https://github.com/filamentphp/filament/blob/27eb96920c15528e350ce78ee5b92063945566ff/packages/panels/resources/views/components/layout/simple.blade.php#L42
You can set it to one of those Enum widths:
https://github.com/filamentphp/filament/blob/27eb96920c15528e350ce78ee5b92063945566ff/packages/panels/resources/views/components/layout/simple.blade.php#L31-L42C37
So, to override EditProfile, you must extend it into a class of your own, override the properties or methods as you wish, and then tell your panel to use your override class. This is explained in the Filament docs: https://filamentphp.com/docs/3.x/panels/users#customizing-the-authentication-featuresGitHub
filament/packages/panels/src/Pages/Auth/EditProfile.php at 27eb9692...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
GitHub
filament/packages/panels/resources/views/components/layout/simple.b...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
GitHub
filament/packages/panels/src/Pages/SimplePage.php at 27eb96920c1552...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
Thank you so much, it worked 🙂
@DrByte thank you so much for the help, I would also like to know how to use full panel with headers footers and sidebars on the EditProfile page please ?
Will, since it's extending SimplePage, you could explore changing it from that to the main Page class instead. There may be a number of other things you'll need to implement (or turn off) if you do that.
Yes, I think custom livewire component would be great.
Thank you so much.