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(),
]),
])
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), 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),