Search code examples
reactjsreact-bootstrap

Content Go hidden on top in React

I'm new to react. I am creating a cardlist with react bootstrap. Problem is no matter what I do When my list become larger it overflow and show like this. Note that my other half is hidden on top of the browser.enter image description here

my fragment of code is below.

class Admin extends Component {
  render() {

    const examlist = exams ? (
      exams.map((exam) => {
        let tempTime = new Date(exam.startTime.seconds * 1000);
        let time = tempTime.toLocaleDateString("en-GB", {
          hour: "numeric",
          hour12: true,
        });
        return (
          <AddExamTab
            key={exam.id}
            title={exam.title}
            description={exam.description}
            id={exam.id}
            className={exam.class}
            time={time}
          />
        );
      })
    ) : (
      <div className="container">
        <h4>
          <Spinner />
        </h4>
      </div>
    );

    return (
      <div className="container">
        <AddExam />
        {examlist}
      </div>
    );
  }
}

Maybe I have done somthing silly. what am I doing wrong here? Can anyone tell me? I'd be very grateful if anyone help me in this problem.

Solution

  • It's not a React related problem, but a CSS related.

    You should experiment with the parent div (with "container" class). Try to create your own class, add height and overflow properties.

    Here is a small example of how you can implement that:

    .container {
  height: 200px;
  width: 50%;
  overflow-y: scroll;
  background-color: #828282;
}

.container > div {
  height: 100px;
  margin-bottom: 2px;
  background-color: #929292;
}
    <div class="container">
  <div>x1</div>
  <div>x2</div>
  <div>x3</div>
  <div>x4</div>
  <div>x5</div>
</div>