F
Filament•4d 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(),
                ]),
            ])
            ->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(),
                ]),
            ])
No description
Solution:
have found an almost complete solution 🙂 ```php Tables\Columns\Layout\Stack::make([ Tables\Columns\SpatieMediaLibraryImageColumn::make('image_link') ->collection(config('project.product_media_collections.images'))...
No description
Jump to solution
11 Replies
Vp
Vp•4d ago
Try to put grow in image, but not sure tho 🤣
lutek
lutek•4d ago
Did not help.
Vp
Vp•4d ago
lutek
lutek•3d ago
The demo probably had a fixed image size, I had this ->size('100%') before.
Vp
Vp•3d ago
what if you apply like the link does ->height('100%')->width('100%') still the same or not w8.. sorry it doesn't make sense.. let me try to replicate and will get you back Below are my code 
->columns([
    Tables\Columns\Layout\Stack::make([
        Tables\Columns\ImageColumn::make('image'),

        Tables\Columns\Layout\Stack::make([
            Tables\Columns\TextColumn::make('name'),

            Tables\Columns\TextColumn::make('email'),
        ]),
    ])->space(3),
])
->contentGrid([
    'md' => 3,
    'xl' => 5,
])
->columns([
    Tables\Columns\Layout\Stack::make([
        Tables\Columns\ImageColumn::make('image'),

        Tables\Columns\Layout\Stack::make([
            Tables\Columns\TextColumn::make('name'),

            Tables\Columns\TextColumn::make('email'),
        ]),
    ])->space(3),
])
->contentGrid([
    'md' => 3,
    'xl' => 5,
])
Vp
Vp•3d ago
And this is result.. looks same without doing anything
Vp
Vp•3d ago
Change it like this, and result.. I think ->size('auto') is breaking something (which does for me) 
->columns([
    Tables\Columns\Layout\Stack::make([
        Tables\Columns\ImageColumn::make('image')
            ->height('100px')
            ->width('100%')
            ->extraImgAttributes([
                'class' => 'rounded-lg mb-4',
            ])
            ->alignCenter()
            ->verticallyAlignCenter(),

        Tables\Columns\Layout\Stack::make([
            Tables\Columns\TextColumn::make('name')
                ->verticallyAlignEnd(),

            Tables\Columns\TextColumn::make('email')
                ->verticallyAlignEnd()
                ->color(Color::Red)
                ->size(Tables\Columns\TextColumn\TextColumnSize::Medium),
        ]),
    ])->space(3),
])
->columns([
    Tables\Columns\Layout\Stack::make([
        Tables\Columns\ImageColumn::make('image')
            ->height('100px')
            ->width('100%')
            ->extraImgAttributes([
                'class' => 'rounded-lg mb-4',
            ])
            ->alignCenter()
            ->verticallyAlignCenter(),

        Tables\Columns\Layout\Stack::make([
            Tables\Columns\TextColumn::make('name')
                ->verticallyAlignEnd(),

            Tables\Columns\TextColumn::make('email')
                ->verticallyAlignEnd()
                ->color(Color::Red)
                ->size(Tables\Columns\TextColumn\TextColumnSize::Medium),
        ]),
    ])->space(3),
])
No description
lutek
lutek•3d ago
I have also tried this approach, but the problem is the scaling of the image. I have no idea how to fix it 🙂
No description
No description
Vp
Vp•3d ago
just put fixed heigh ->height('100px') like I did?
Solution
lutek
lutek•3d ago
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),
                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),
No description
lutek
lutek•3d ago
done by object-scale-down, but without rounding corners. or even better 'object-none'
Want results from more Discord servers?
Add your server