Filament / Custom Page / No styling

Hi all, I have created a custom page and it lacks any styling. It appears as a navigation item on e.g. my app home page but when I click through, no styling is present.

I followed the steps here to generate a custom theme (as I read somewhere that this mandatory to have styling on custom pages etc.)

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

And this is the screen output I get

me@hcatdev:~/code/hcat$ php artisan make:filament-theme
Using npm v9.2.0

<snip>

   INFO  Filament theme [resources/css/filament/admin/theme.css] and [resources/css/filament/admin/tailwind.config.js] created successfully.  

   WARN  Action is required to complete the theme setup:  

  ⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/admin/theme.css`  
  ⇂ Next, register the theme in the admin panel provider using `->viteTheme('resources/css/filament/admin/theme.css')`  
  ⇂ Finally, run `npm run build` to compile the theme

So I modified my vite.config.js from this

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
...
...

to this

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js', // Existing JS file
                'resources/css/filament/admin/theme.css', // Add your custom Filament theme
            ],
...
...

And I modified AdminPanelProvider.php to change this

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
...
...

to this

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->viteTheme('resources/css/filament/admin/theme.css')
...
...

I think that's what the instructions were telling me to do - but I still have no styling present (and the blade content doesn't appear within the app as such - just as a a new page all squiggled up in the top left hand corner).

Have I followed the instructions correctly and what should I do to further identify the issue?

many thanks for your help, j

jj63systems

1 year ago

Level 2

I just inadvertently dismissed the AI-generated (suggested) answer! I was working through its suggestions - didn't get to the end - can I get it back?

jj63systems

1 year ago

Level 2

Hi providing some more info - my browser console shows under the network tab just 2 items

research-home
livewire.js

I access the page through a link that says

https://<domain>/admin/research-home

My blade code is simply this

<x-filament-panels::page>
    <form wire:submit="search">
        {{ $this->form }}
        
        <x-filament::button type="submit" class="mt-4">
            Search
        </x-filament::button>
    </form>

    @if(count($searchResults) > 0)
        <div class="mt-6">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    @foreach($searchResults as $result)
                        <div class="mb-4 p-4 border rounded">
                            <!-- Customize this based on your result structure -->
                            <h3 class="text-lg font-semibold">{{ $result->title ?? '' }}</h3>
                            <p>{{ $result->description ?? '' }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
</x-filament-panels::page>

So as I understand it, this code should be inheriting the filament "wrapper" of styling etc.

I did some further tinkering - the blade code looks OK to me - what I have found in fact is the the code I have in my ResearchHome.php file is problematic - I included this function:

    public function render(): View
    {
        return view('filament.pages.research-home');
    }

Having removed that function, the blade content now displays within the filament "wrapper" - so the question is, do I need to have a render() function explicitly defined and what was it that broke all the styling?

thx!

Please or to participate in this conversation.