FilamentF
Filament•9mo ago
Dev

Border Issue

    protected function getAnswerCards(): array
    {
        $answers = $this->getRecord()->answers;
        
        return $answers->map(function ($answer) {
            return Components\Card::make()
                ->schema([
                    Components\TextEntry::make('answer_text')
                        ->state($answer->answer_text)
                        ->weight($answer->is_correct ? 'bold' : 'normal')
                        ->color($answer->is_correct ? 'success' : 'gray')
                        ->columnSpan(2),
                        
                    Components\IconEntry::make('is_correct')
                        ->state($answer->is_correct)
                        ->label('Correct Answer')
                        ->icon(fn (bool $state): string => $state ? 'heroicon-o-check-circle' : 'heroicon-o-x-circle')
                        ->color(fn (bool $state): string => $state ? 'success' : 'danger')
                        ->size(Components\IconEntry\IconEntrySize::Large)
                        ->alignCenter(),
                ])
                ->columns(2)
                ->extraAttributes([
                    'class' => $answer->is_correct ? 'border-2 border-indigo-500' : 'border-gray-300',
                    'style' => 'min-height: 120px; display: flex; flex-direction: column; justify-content: space-between;',
                ]);
        })->toArray();
    }


The border shows, but only as white, i cannot change the color to indigo or whatever other color

Im trying to make it green, i tried indigo, i tried to make border-2 to border -3 it completely disappears, trying to understand why is that happening
Solution
You would need to apply the class. If you want a custom color like that, just include the class in a div class i.e.

<div class=" border-gray-300 border-2 border-indigo-500 "></div>

in a custom blank blade and re-compile the css.
Jump to solution
Was this page helpful?