FilamentF
Filament15mo ago
lutek

Grid table, align stack component to bottom.

Hi, I am trying to align the product title with the price at the bottom of the "card", but it is not working. I'm not familiar with tailwindcss. How do I change my code to stick the stack with the product title and price at the bottom, regardless of image size? (see attachment).

            ->columns([
                Tables\Columns\Layout\Stack::make([
                    Tables\Columns\SpatieMediaLibraryImageColumn::make('image_link')
                        ->collection(config('project.product_media_collections.images'))
                        ->conversion('thumb')
                        ->defaultImageUrl(fn ($record) => $record->image_link)
                        ->extraImgAttributes([
                            'class' => 'rounded-lg mb-4 max-h-64',
                        ])
                        ->alignCenter()
                        ->verticallyAlignCenter()
                        ->size('auto'),
                    Tables\Columns\Layout\Stack::make([
                        Tables\Columns\TextColumn::make('title')
                            ->verticallyAlignEnd(),
                        Tables\Columns\TextColumn::make('price')
                            ->verticallyAlignEnd()
                            ->label(__('Cena'))
                            ->color(Color::Red)
                            ->size(Tables\Columns\TextColumn\TextColumnSize::Medium)
                            ->money(),
                    ])->alignEnd(),
                ]),
            ])
ScreenShot_2024-10-14_at_18.08.23.png
Solution
have found an almost complete solution 🙂
                Tables\Columns\Layout\Stack::make([
                    Tables\Columns\SpatieMediaLibraryImageColumn::make('image_link')
                        ->collection(config('project.product_media_collections.images'))
                        ->conversion('thumb')
                        ->defaultImageUrl(fn ($record) => $record->image_link)
                        ->extraImgAttributes([
                            'class' => 'rounded-lg max-h-64 object-scale-down',
                        ])
                        ->alignCenter()
                        ->verticallyAlignCenter()
                        ->height('233px')
                        ->width('100%'),
                    Tables\Columns\Layout\Stack::make([
                        Tables\Columns\TextColumn::make('title')
                            ->verticallyAlignEnd(),
                        Tables\Columns\TextColumn::make('price')
                            ->verticallyAlignEnd()
                            ->label(__('Cena'))
                            ->color(Color::Red)
                            ->size(Tables\Columns\TextColumn\TextColumnSize::Medium)
                            ->money(),
                    ]),
                ])->space(3),
ScreenShot_2024-10-15_at_12.19.24.png
Was this page helpful?