Reputation: 253
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.
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.
Upvotes: 0
Views: 44
Reputation: 463
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>
Upvotes: 1