htmlcssmodal-dialoghorizontal-scrolling
Horizontal Scrolling in Modal Image gallery thumbnail section is now working
I am using the Modal box to display some images, with a caption and a thumbnail section below.
The problem I am facing is that the thumbnail section works just fine for 6 or less than 6 images, I have to decrease the size of thumbnails if there are more images. Right now I have 10.
What I want to do is to have a horizontally scrollable thumbnail section. It can solve all my problems. I tried online, but I couldn't seem to make it.
Part of My Code :
<div class="row1">
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-sudo-0.png" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-sudo-1.png" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-0.png" style="width:100%" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-1.png" style="width:100%" onclick="currentSlide(4)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-2.png" style="width:100%" onclick="currentSlide(5)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-3.png" style="width:100%" onclick="currentSlide(6)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-4.png" style="width:100%" onclick="currentSlide(7)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-5.png" style="width:100%" onclick="currentSlide(8)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-bike-0.png" style="width:100%" onclick="currentSlide(9)">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-bike-1.png" style="width:100%" onclick="currentSlide(10)">
</div>
The solution I found online was to add this to my CSS:
.row1 {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.column {
display: inline-block;
width: 16.66%;
}
This is not working, but it is surely doing something. When I use inspect elements, it shows me that the column is there, but I just can't see it. I have attached the screenshot below.
Just in case, I am attaching my entire Modal Code:
<div id="myModal" class="modal" onkeypress="closeModal()">
<!-- Modal content -->
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 10</div>
<img src="assets/images/achievements/achi-sudo-0.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">2 / 10</div>
<img src="assets/images/achievements/achi-sudo-1.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">3 / 10</div>
<img src="assets/images/achievements/achi-yoga-0.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">4 / 10</div>
<img src="assets/images/achievements/achi-yoga-1.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">5 / 10</div>
<img src="assets/images/achievements/achi-yoga-2.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">6 / 10</div>
<img src="assets/images/achievements/achi-yoga-3.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">7 / 10</div>
<img src="assets/images/achievements/achi-yoga-4.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">8 / 10</div>
<img src="assets/images/achievements/achi-yoga-5.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">9 / 10</div>
<img src="assets/images/achievements/achi-bike-0.png" style="width:100%" alt="Achievements">
</div>
<div class="mySlides">
<div class="numbertext">10 / 10</div>
<img src="assets/images/achievements/achi-bike-1.png" style="width:100%" alt="Achievements">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row1">
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-sudo-0.png" style="width:100%" onclick="currentSlide(1)" alt="Test">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-sudo-1.png" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-0.png" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-1.png" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-2.png" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-3.png" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-4.png" style="width:100%" onclick="currentSlide(7)" alt="Snowy Mountains">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-yoga-5.png" style="width:100%" onclick="currentSlide(8)" alt="Snowy Mountains">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-bike-0.png" style="width:100%" onclick="currentSlide(9)" alt="Snowy Mountains">
</div>
<div class="column">
<img class="demo cursor" src="assets/images/achievements/achi-bike-1.png" style="width:100%" onclick="currentSlide(10)" alt="Snowy Mountains">
</div>
</div>
</div>
Entire Modal CSS:
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
}
/* Modal Content */
.modal-content {
margin: auto;
display: block;
background-color: #f2f2f2;
border: none;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 70px;
}
/* The Close Button */
.close {
color: white !important;
position: absolute;
top: 10px;
right: 25px;
font-size: 30px !important;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999 !important;
text-decoration: none;
cursor: pointer;
}
mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
/* padding-right: 25px;*/
margin-top: -30px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 10px 10px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 10px 0 0 10px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
color: #f2f2f2;
background-color: rgba(0, 0, 0, 0.4);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #f2f2f2;
padding: 2px 16px;
color: #333;
}
.row1 {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.column {
display: inline-block;
width: 16.66%;
}
Thanks for your help!
Solution
I got it. The problem was with the container element. The "max-height" attribute was creating the problem. I just changed this :
.modal-content {
margin: auto;
display: block;
background-color: #f2f2f2;
border: none;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: max-content; //THIS
}