Filament•4mo ago

No styling in InfoList when used in a livewire component?

I wanted to use infolist on a livewire page for its design, but when used on a livewire page its just plain text. Am I doing something wrong?

namespace App\Livewire;

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Filament\Infolists\Infolist;
use Illuminate\Support\Facades\Auth;
use Livewire\Attributes\Title;
use Livewire\Component;

class ProfilePage extends Component implements HasForms, HasInfolists
{

    use InteractsWithInfolists;
    use InteractsWithForms;


    #[Title('Profile Page')]

    public $user;

    public function ProfilePageInfolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->record($this->user)
            ->schema([
                TextEntry::make('name'),
                TextEntry::make('email'),
                TextEntry::make('phone_number'),
                TextEntry::make('points'),

            ]);
    }

namespace App\Livewire;

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Filament\Infolists\Infolist;
use Illuminate\Support\Facades\Auth;
use Livewire\Attributes\Title;
use Livewire\Component;

class ProfilePage extends Component implements HasForms, HasInfolists
{

    use InteractsWithInfolists;
    use InteractsWithForms;


    #[Title('Profile Page')]

    public $user;

    public function ProfilePageInfolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->record($this->user)
            ->schema([
                TextEntry::make('name'),
                TextEntry::make('email'),
                TextEntry::make('phone_number'),
                TextEntry::make('points'),

            ]);
    }

14 Replies

Marco•3mo ago

Where is your blade file located, maybe you haven't added the path to the tailwind.config.js content array

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {}
    },
}

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {}
    },
}

dont forget to npm run build or npm run dev after

MZXOP•3mo ago

Tailwind is working

MZXOP•3mo ago

MZXOP•3mo ago

The infolist is plain I thought it'd be something like the way its in when used in a panel resource

Marco•3mo ago

not sure what you mean, how would you like it to show?

MZXOP•3mo ago

How can i style this? I think its because of the backgruond it looks very plain, looks better in a filament panel

Unknown User•3mo ago

Message Not Public

toeknee•3mo ago

Tailwind might be working but you'll need to esnure you are loading in the vendor filament components to parse and load in the required assets.

ChesterS•3mo ago

If this is outside Fillament pages, you might need to load the styles in the layout itself with @filamentStyles

ChesterS•3mo ago

https://filamentphp.com/docs/3.x/forms/installation#configuring-your-layout

Installation - Form Builder - Filament

MZXOP•3mo ago

This worked. Thanks!! One last thing, how do i change the colors and the preset?

ChesterS•3mo ago

What do you mean? Which colors?

MZXOP•3mo ago

My navbar turned black after i did that

ChesterS•3mo ago

For style changes, you probably need a custom theme (there are instructions for it somewhere in the documentation) maybe it's bacause dark mode is enabled

Gaming

Programming

No styling in InfoList when used in a livewire component?