How to increase table max width layout?
I have a large screen. I want to be able to see all the table rows without scrolling horizontally.
Using the admin panel, how to change the main css:
<main class="fi-main mx-auto h-full w-full px-4 md:px-6 lg:px-8 max-w-7xl sticky-theme-default">
i need to change the max-w-7xl and increase it. (ive tested it in the browser and yeah, that makes the trick, so yeah that is what i need)
any "clean" way, or i just override the css somehow? i tried to find how to do it in the docs33 Replies
Do you mean setting
protected ?string $maxContentWidth = "full"; in the ListRecords class?no clue, let me try to test it
now i just found this:
inside panel fn in adminpanelprovider:
->maxContentWidth('20px')
and i did put 20 just to test
now is full width
niceYou can set it globally in the PanelProvider or just for one specific Page in the Page class
cool, and should be a tailwind class right?
full is ok
and if i want max-w-8xl, how to do it?
use the helper class
Filament\Support\Enums\MaxWidthah i see - (\Filament\Support\Enums\MaxWidth|string|null $maxContentWidth)
thanks 🙏
appreciate ur time
this is just a shorthand of the tailwind classes. but its more bullet-prove I think
u know what to do in this one? - https://discord.com/channels/883083792112300104/1184098127737798686
Maybe. I have a look. Mark this question as completed, please
i did
Glad that I found this thread. This Info MUST be somewhere in the table docs, even if you don't directly configure the table width. But when searching for it, you will assume, that the table width is limited, and not the page container width. I had to search for 30 mins now, just to find how to increase the width of a single table.
Would be also good to know, how I can set it exactly to 1400px
agree
not sure how to make it 1400px exactly, u solved it?
i think you could just use
max-w-1400px as maxContentWidth and add the max-w-1400px to your tailwind config's safelist. Not tested, just a guess@bernhard The class name gets correctly added to the div container. Howver it seems tailwind does not compile it. I tried
npm run dev and npx tailwindcss -w. Also created a custom class using { theme: { maxWidth: { cool: '1900px' } } } to have max-w-cool. Im out of ideasadd it to your theme css file
Sry, was i typo. its of course
max-w-[1400px] (with [])
So what you have to do
Set the max width in the PanelProvider Class:
and then you just have to add it to the safelist of tailwind as well
(tailwind.config.js)I added a test class in
/resources/css/app.css but it seems my css is not compiling. Im running vite, this should usually handle it, doesnt?well, if you follow the above 2 steps, you dont need an extra css
but if you like to add extra css, follow the docs for theming: https://filamentphp.com/docs/3.x/panels/themes
I tried it using the tailwind syntax
max-w-[1400px], but seems rather a bundling issue from my side.
Also removed the @tailwind base; ... entries, and the app is still working 🤔where did you remove this?
in /resources/css/app.css
have u added this as a theme?
No, I'm pretty much using the Filament oob config
then it isn't used at all
so you can add or remove whatever you want, its just a useless file 😉
ok 😄
as I said, if you want to customize the styling more, follow the guide https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
Still struggling with tailwind. The page is still full width
Are you updating the file at resources/css/filament/admin/tailwind.config.js?
And did you follow the steps in the terminal after running
filament:theme?@awcodes thanks, now I understood. In v3 it is necessary to create a theme to use any custom tailwind class.
I think this wasn't the case in v2, but I don't really remember since its already 10 months passed
protected ?string $maxContentWidth = 'max-w-[1800px]'; is working now, also hot reload 🥹