Weekday boxes have little lines or spaces between them if you look carefully. These lines or gaps ar-CodePudding

I am using vite react typescript.

My App component

function App() {
  return (
    <div>
      <DatePicker />
    </div>
  );
}

My DatePicker component

function DatePicker() {
  return (
    <div className="datepicker-wrapper">
      <input />
      <input />

      <Calendar />
    </div>
  );
}

My Calendar Component

function Calendar() {
  return (
    <div className="datepicker-popper">
      <div className="datepicker-weekday">Sunday</div>
      <div className="datepicker-weekday">Monday</div>
      <div className="datepicker-weekday">Tuesday</div>
      <div className="datepicker-weekday">Wednesday</div>
      <div className="datepicker-weekday">Thursday</div>
      <div className="datepicker-weekday">Friday</div>
      <div className="datepicker-weekday">Saturday</div>
    </div>
  );
}

and finally my css file

body {
  margin: 0;
}

.datepicker-wrapper {
  position: relative;
  font-family: monospace;
  display: flex;
  gap: 2rem;
}

.datepicker-popper {
  position: absolute;
  bottom: -0.8rem;
  left: 50%;

  translate: -50% 100%;

  box-sizing: border-box;
  padding: 0.3rem;
  width: 100%;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0.6rem;
}

.datepicker-weekday {
  display: block;
  background-color: palevioletred;
}

check this image The boxes containing weekdays have weird space or line b/w them in chrome but not in firefox.

I tried making the container flexbox, grid. I also tried changing the div to span but none of them worked.

Here is the codesandbox link : https://codesandbox.io/p/sandbox/wonderful-stitch-deoc00?file=/src/index.css&selection=[{"endColumn":1,"endLineNumber":31,"startColumn":1,"startLineNumber":1}]

Try running this sandbox in chrome and firefox. You will see the difference.

CodePudding user response：

I think you need just use 'normalize.css' file to avoid different results in different browsers. Normalizing file you can take from each site you have googled

CodePudding user response：

I can't find the exact problem with your css, but it seems overcomplicated. If you add flex-wrap: wrap to .datepicker-wrapper, it will allow the .datepicker-popper to fall below the inputs and you can get rid of all the absolute positioning and translating that cause the white line to appear. It will also make your code more readable.

here is the code with the above mentioned fixes applied: https://codepen.io/Aga-K-O/pen/RwBqZWq?editors=1100