I have a carousel with product descriptions.
Is there a way to have the box around each item the same height as the largest description?
I have a fixed height but this is dependent on the descriptions from the DB and could break if a longer description is saved
My current usage is:
Template
Code: Select all
const brandTemplate = (brand: BrandType) => {
return (
<div className="border-1 surface-border border-round m-2 text-center py-5 px-3 ">
<div
style={{
position: 'relative',
// overflow: 'hidden',
width: '370px',
height: '200px',
}}>
<Image
src={`data:image/jpeg;base64,${brand.awsImageData}`}
alt={brand.title}
fill={true}
style={{ objectFit: 'cover' }}
/>
</div>
<div>
<h4 className="mb-1">{brand.title}</h4>
<div style={{ height: '15em' }} className="mt-0 mb-3">
{brand.catDescription}
</div>
<div className="mt-5 flex flex-wrap gap-2 justify-content-center">
<Button
icon="pi pi-search"
className="p-button p-button-rounded"
onClick={() => {
router.push(`/product/brandProduct/${brand.id}`);
}}
/>
<Button
disabled
icon="pi pi-star-fill"
className="p-button-success p-button-rounded"
/>
</div>
</div>
</div>
);
};
Code: Select all
<Carousel
value={brandItems}
numVisible={3}
numScroll={3}
responsiveOptions={responsiveOptions}
itemTemplate={brandTemplate}
circular
autoplayInterval={3000}
/>
Tnanks