Carousell Item height based data

[chrishj]

Hi,

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>
		);
	};

Carousel:

Code: Select all

<Carousel
					value={brandItems}
					numVisible={3}
					numScroll={3}
					responsiveOptions={responsiveOptions}
					itemTemplate={brandTemplate}
					circular
					autoplayInterval={3000}
				/>

I have attempted to use the PT options but they did not seem to have the effect.

Tnanks

[Melloware]

Can you put together a code sandbox so i can actually see the problem? That is the only way I will be able to help you possibly fix it.

[chrishj]

Hi,

I have upgraded PrimeReact to 9.6.1 and Apollo to apollo-react-9.0.0 which has fixed the issue.



Thanks for looking at the issue.