CODEWITHSUNDEEP
javascriptcssreactjssassflexbox
Mehdi Faraji
Mehdi Faraji

Reputation: 3806

CSS 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 : image-one

image-two

How can I apply padding to the array item's container div for both the left and right sides ?

Upvotes: 1

Views: 3105

Answers (2)

Sergii Onish
Sergii Onish

Reputation: 140

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

Upvotes: 1

Erick T Oliveira
Erick T Oliveira

Reputation: 124

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;

Upvotes: 1

Related Questions