0
235
ViewsCSS padding is not applied to the div in react js
I have a div like this in react js which renders multiple divs and overflows :
<div
style={{
display: "flex",
padding: "1em 0.7em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
But for some reason the padding is applied to the containers right side but not the left side here are some pictures :
How can I apply padding to the array item's container div for both the left and right sides ?
·
Juan Pablo Isaza
2 answers
Answer question0
It's the padding on the div. It's to little and the margin too.
import React from "react";
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
);
};
export default App;
·
Juan Pablo Isaza
Report
0
It's because your div width bigger then the body,
and as result your body also have scroll.
Try add boxSizing: border-box to your parent component, and the body scroll will disappear.
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e",
boxSizing: "border-box" // <--- this line
}}
>
...
</div>
);
};
·
Juan Pablo Isaza
Report
Answer question