Why did the element lose its border-radius when I dragged them? It seems like the element is cutting into the background to fill the four corners. Click here to see
CSS class for item:
.list_item_pic {
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 3vh;
background-size: cover;
transition: all ease 0.3s;
}
CSS class for container:
.playlist_display_area {
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
width: calc(100%);
height: 60vh;
padding: 0 10px;
gap: 10px;
grid-template-columns: repeat(auto-fill, 28vh);
grid-template-rows: repeat(2, 28vh);
/* grid-template-columns: repeat(auto-fill, minmax(28vh, auto));
grid-template-rows: repeat(auto-fill, minmax(28vh, auto)); */
grid-auto-flow: column;
display: grid;
}
React JSX code snippet:
<div className="playlist_display_area">
{playLists?.map((playlist) => {
const songs = playlist.songs;
let listBg = songs[songs.length - 1]?.AlbmPic;
listBg = listBg || this.trackBoxBgArr[getRandomInt(0, 5)];
return (
<div
key={playlist.listId}
className={`list_item_pic ${playlist.boxSize}`}
onContextMenu={(e) =>
this.onContextMenu(e, playlist, playLists)
}
draggable="true"
onDragStart={() => this.handleDragStart(playlist.listId)}
onDrop={(e) => this.ondrop(e, playlist.listId)}
onDragOver={(e) => this.handleDragover(e)}
style={{ backgroundImage: listBg }}
>
<div className="list_inside_label">{playlist.name}</div>
</div>
);
})}
</div>