You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Unable to customize the first image grid: The desired behavior is for the first item to have a col-span-2 and row-span-2, but this functionality is currently not functioning as expected. While using custom CSS, I can adjust the width and height, but this causes other items to overflow.
I don't believe they're updating this anymore. If you're skilled in Typescript, you might want to attempt to resolve it. I tried, but I couldn't figure it out as I'm not proficient in Typescript.
Unable to customize the first image grid: The desired behavior is for the first item to have a col-span-2 and row-span-2, but this functionality is currently not functioning as expected. While using custom CSS, I can adjust the width and height, but this causes other items to overflow.
<GridContextProvider onChange={onChange}> <GridDropZone id="image-grid" boxesPerRow={5} rowHeight={280} style={{ height: 280 * Math.ceil(images.length / 4) }} className="grid grid-cols-5 gap-4" > {images.map((image, index) => ( <GridItem className=" cursor-grab" key={image.src} index={index}> <div className={
${index == 0 ? "col-span-2 row-span-2 bg-green-400" : ""
} relative group
} > <input type="checkbox" disabled={loading} checked={checkedImages.includes(image)} onChange={() => handleCheckboxChange(image)} className={
absolute top-5 left-5 transform scale-150 cursor-pointer group-hover:opacity-100 ${checkedImages.includes(image) ? "opacity-100" : "opacity-0"
} z-10
} /> <img src={image.src} alt="image" draggable="false" className={
border shadow-sm rounded-lg w-full h-full m-auto transition-opacity duration-300 ${checkedImages.includes(image) ? "opacity-60" : ""
}
} /> <div className={
bg-black rounded-lg absolute top-0 left-0 w-full h-full transition-opacity duration-300 ${checkedImages.includes(image)
? "opacity-10"
: "opacity-0 group-hover:opacity-40"
}
} ></div> </div> </GridItem> ))} </GridDropZone> </GridContextProvider>
The text was updated successfully, but these errors were encountered: