I am facing an issue with a horizontal scrollable div containing squared divs. Despite my efforts, I am unable to increase the size of these squared divs without them shrinking. Even in the presence of just 3 squared divs, adding a new one causes all of them to become smaller. How can I stop this resizing and maintain the scrollable nature of the div?
Implement a minimum width for your containers and ensure that they do not wrap.
The updated code can be found at the end of the CSS segment
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Edit Product -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Edit Product-->delete the col class within the div.img-box,
make sure to alter the display property of the .row class to block instead of flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...
I have come across a block of HTML code that contains form action elements and multiple occurrences of quotation marks. Is there a method to convert the entire block into a string? public string methodName() { return @ " text goes here.. blah blah ...
Looking to validate a form before running a JavaScript function? Check out this code snippet: function updateMap() { //dummy } <form> <div class="group"> <input type="number" id="hour" min="0" max="23" required> <span cl ...
I have come across similar questions, but none of them quite addressed my specific situation. My dilemma involves a tabbed navigation that can vary in size depending on the number of tabs added to it. Adjacent to the navigation, there is a second area hous ...
I'm attempting to create a visually appealing underline under the active tab, but I am facing challenges in targeting the specific class. Since I am utilizing bootstrap and unable to adjust the width and margin of text-decoration or recognize an eleme ...
Within index.php, I am calling the function twice, which includes chart.html. index.php chart_line($valuesNight); //first call chart_line($valuesEvening); //second call ?> <?php function chart_line($jsonDataSource){ ?> < ...
After successfully creating code for ajax requests and fetching information from the server, I encountered an issue where clicking a link would smoothly transition me to a new page without refreshing the header and footer. However, upon clicking another li ...
I attempted the solution that seemed most straightforward, but unfortunately it didn't yield the desired outcome... const element = document.getElementById("element-id"); element.value = new Date().toString(); The code requires a string input, but h ...
My issue is that I want #text1 to display on the right side of #video1, and #text2 to be positioned next to #video2. However, currently #text2 is also appearing beside #video1. Can someone please explain why this is happening and provide a solution to fi ...
I have successfully implemented a basic form using AngularJS. The issue I am facing is that even after the user enters their details and submits the form, the values remain in the input fields. My goal is to store the details of multiple fields in the con ...
I'm currently working on developing a messaging app similar to WhatsApp. In the app, I have a parent div that holds the messages, and a child div that contains the text field and send button. My goal is to keep the text field and button at the bottom ...
Here's my code: if ($image1 !=='') { //Insert div here } However, I'm encountering parse errors when I try to place the div within the curly brackets. Is there a specific syntax or format that I am missing...? ...
One of the designers in our team has given me an icon set in the form of .png files (each in 1x and 2x resolution) that I am considering converting into a webfont. Do you have any recommendations on the best way to accomplish this task? ...
I love the flexibility that flexbox provides, but I've been facing an issue specifically with wrapping on iOS devices. Is there a simple fallback option for handling wrapping? Here's a problem scenario where items refuse to wrap: ( JSFiddle Fans ...
I am puzzled by the fact that, despite resetting their properties, the width and height of both the input and select boxes are different (you can see for yourself on this fiddle): HTML <div class="myDiv"> <input class="myInput&q ...
Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...
I've been working on some code that adds an input field when a button is clicked. When the limit reaches 5 (counter), it displays a bootstrap warning. The issue I'm facing is that after hitting "add field" more than 5 times, the values in the fie ...
Why is only one column showing up even though I'm using the col-md-6 class? div class="container"> {% for member in section.blocks %} <div class="row"> <div class="col-lg-6 col-md-6"> {% if member.settings.photo %} {{member ...
Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...
I am currently working on updating my webpage and facing a few challenges that I would appreciate some assistance with: One issue is that the images on my page do not adjust to the size of the browser window. As a result, when I resize the window, the i ...