I have created a div container and I would like to implement a horizontal scroll bar when there are more than four items (each item consists of a picture with a title).
Desired outcome: https://i.sstatic.net/wWucQ.png
The issue I am facing is that by using the code below, I end up with a vertical scroll bar and the fifth item appears on a new row.
Current result: https://i.sstatic.net/dleuD.gif
This is the HTML:
<div class="col-xl-10 col-lg-12 col-md-12 col-sm-12 wrapper">
<div class="row scroll">
<div class="col-lg-3 col-md-3 col-sm-12 image-holder">
<div class="image-crop">
<img src="../../../../assets/fortress.jpg" class="img-fluid img-file"
alt="Responsive image of item">
<div class="shadow"></div>
</div>
<span class="image-text">Fortress</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 image-holder">
... SAME AS ABOVE x4...
</div>
</div>
</div>
This is the CSS:
.image-holder {
position: relative;
width: 100%; /* for IE 6 */
}
.image-text {
position: absolute;
top: 78%;
left: 33%;
text-align: center;
color: white;
font-size: 1.8rem;
}
.image-crop {
position: relative;
margin: 10px;
float: left;
-webkit-box-shadow: inset 0 -45px 45px -11px #000000;
-moz-box-shadow: inset 0 -45px 45px -11px #000000;
box-shadow: inset 0 -45px 45px -11px #000000;
}
.img-file {
display: block;
position: relative;
z-index: -1;
height: 270px;
width: 300px;
object-fit: cover;
}
/* horizontal scroll */
.wrapper {
position: relative;
width: 600px;
}
.scroll {
overflow-x: scroll;
overflow-y: scroll;
height: 250px;
white-space: normal;
}
The main objective is to achieve the layout shown in the first image. Later, I plan to switch to a vertical scroll bar on mobile view screens.
Here is the StackBlitz example without using Bootstrap:
https://stackblitz.com/edit/angular-xxuvdx?file=src%2Fapp%2Fapp.component.html