Filament•5mo ago

blade section component scrollable

Hi, how can i make the blade section component scrollable with fixed width? I am writing a chat funcion for my app and want it to make the chat scrollable, instead of an infinite long section component.

Solution:

Hey! Depending on your setup: If you have a custom Filament page you need theming (https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme)...

Themes - Panel Builder - Filament

Jump to solution

11 Replies

toeknee•5mo ago

You can use slideover() if it's a slide button / action. Or just apply tailwind classes

PippoPizza•5mo ago

ok guess i'll go with tailwind classes, but i'm having a problem where the classes don't load in view but the code is:

<x-filament::section>
        <!-- Chat Bubble -->
        @foreach ($messages as $message)
        @if ($message->user_id != Auth::user()->id)
            <div class="grid grid-cols-3 justify-items-start">
                <div class="w-2/5">
                    <div>
                        <x-filament::avatar
                        src={{"/storage/".$message->user->avatar_url}}
                        size="w-12 h-12"
                        />
                    </div>
                    <p class="capitalize text-xs text-slate-700">
                        {{$message->user->name}}
                    </p>
                    <div class="p-1 rounded-sm bg-slate-400 ">
                        {{$message->message}}
                    </div>
                </div>
            </div> 
        @else
        </x-filament::section>

<x-filament::section>
        <!-- Chat Bubble -->
        @foreach ($messages as $message)
        @if ($message->user_id != Auth::user()->id)
            <div class="grid grid-cols-3 justify-items-start">
                <div class="w-2/5">
                    <div>
                        <x-filament::avatar
                        src={{"/storage/".$message->user->avatar_url}}
                        size="w-12 h-12"
                        />
                    </div>
                    <p class="capitalize text-xs text-slate-700">
                        {{$message->user->name}}
                    </p>
                    <div class="p-1 rounded-sm bg-slate-400 ">
                        {{$message->message}}
                    </div>
                </div>
            </div> 
        @else
        </x-filament::section>

I cut it due to discord limit, but the classes don't show even in inspector

toeknee•5mo ago

If the classes are in the blade did you re-compile your vite? npm run build so the classes are includued?

PippoPizza•5mo ago

yes i did run npm run build, but nothing! I wrote this question on the laravel server too and on github but i can;t get it to work, it all seems ok

PippoPizza•5mo ago

The github link with in detail problem and code https://github.com/filamentphp/filament/discussions/11367

GitHub

Can't load tailwind classes · filamentphp filament · Discussion #11...

Package Other Package Version v3.0.0 How can we help you? Hi, i'm having troubles loading tailwind into a custom livewire page that i call in a panel. <x-filament::section> <!-- Chat B...

Solution

Jesse Hendriks•5mo ago

Hey! Depending on your setup: If you have a custom Filament page you need theming (https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) If you have a custom Livewire section you need to make sure tailwind is configured properly (included the filament styles, included app.css).

Themes - Panel Builder - Filament

PippoPizza•5mo ago

Hi, thank you! Does the theme changes the basic filament look?

Jesse Hendriks•5mo ago

Nope, unless you want to 😉

PippoPizza•5mo ago

Great, i'll try it, thank you! sorry to bother, in my general tailiwnd config i have this customs colors

colors: {
                'cobalt': {
                    DEFAULT: '#0045ac', //primario
                    '50': '#ebf8ff',
                    '100': '#d1f0ff',
                    '200': '#aee4ff',
                    '300': '#76d6ff',
                    '400': '#35beff',
                    '500': '#0798ff',
                    '600': '#0072ff',
                    '700': '#0059ff',
                    '800': '#004ad7',
                    '950': '#062965',
                },

colors: {
                'cobalt': {
                    DEFAULT: '#0045ac', //primario
                    '50': '#ebf8ff',
                    '100': '#d1f0ff',
                    '200': '#aee4ff',
                    '300': '#76d6ff',
                    '400': '#35beff',
                    '500': '#0798ff',
                    '600': '#0072ff',
                    '700': '#0059ff',
                    '800': '#004ad7',
                    '950': '#062965',
                },

how can i add them? can i add them like this?

$panel
    ->colors([
        'primary' => [
            50 => '238, 242, 255',
            100 => '224, 231, 255',
            200 => '199, 210, 254',
            300 => '165, 180, 252',
            400 => '129, 140, 248'
            500 => '99, 102, 241',
            600 => '79, 70, 229',
            700 => '67, 56, 202',

$panel
    ->colors([
        'primary' => [
            50 => '238, 242, 255',
            100 => '224, 231, 255',
            200 => '199, 210, 254',
            300 => '165, 180, 252',
            400 => '129, 140, 248'
            500 => '99, 102, 241',
            600 => '79, 70, 229',
            700 => '67, 56, 202',

Jesse Hendriks•5mo ago

Thats what de documentation is stating 😉 Or use the same hex.

PippoPizza•5mo ago

ok thank you so much

Gaming

Programming

blade section component scrollable