How can I increase transform Y value when an item is hovered in react-grid-layout?
When I use the developer tool to see elements style, I see transform: translate(X, Y).
X and Y value is determined by react-grid-layout and I don't have a control for it.
However, I like to move an item up by 1px when it's hovered. Can I do that?
Here is react-grid-layouyt library.
import "./styles.css";
import React, { useState, useRef } from "react";
import GridLayout from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
export default function App() {
const layout = [
{ i: "a", x: 0, y: 0, w: 1, h: 2 },
{ i: "b", x: 1, y: 0, w: 1, h: 2 },
{ i: "c", x: 2, y: 0, w: 1, h: 2 },
{ i: "d", x: 3, y: 0, w: 1, h: 2 }
];
const [lists, setLists] = useState(layout);
const handleDragStop = (layout, oldItem, newItem) => {
console.log("layout", layout);
console.log("oldItem", oldItem);
console.log("newItem", newItem);
const sortedLayout = [...layout].sort((a, b) => {
console.log("a.x", a.x);
return a.x - b.x;
});
sortedLayout.forEach((item, index) => {
item.x = index;
item.y = 0;
});
setLists(sortedLayout);
};
return (
<div className="App">
<GridLayout
className="layout"
layout={lists}
cols={10}
rowHeight={15}
width={1200}
margin={[10, 10]}
onDragStop={handleDragStop}
maxRows={1}
compactType="horizontal"
>
<div key="a" className="grid-item" style={{ border: "red 3px solid" }}>
a
</div>
<div
key="b"
className="grid-item"
style={{ border: "green 3px solid", width: "20px" }}
>
b
</div>
<div key="c" className="grid-item" style={{ border: "blue 3px solid" }}>
c
</div>
<div key="d" className="grid-item" style={{ border: "pink 3px solid" }}>
d
</div>
</GridLayout>
</div>
);
}
.App {
font-family: sans-serif;
text-align: center;
}
.layout {
margin: 200px;
}
.grid-item {
transition: all 0.1s ease;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 40px;
background: pink;
}
.grid-item:hover {
transform: translateY(-1px);
box-shadow: 0px 8px 15px 0px #3e3e3e33;
}
Attempts
I added transform: translateY(-1px); in .grid-item:hover, I see box-shadow css applied correctly but not transform`
