Check out my stackblitz demo here: https://stackblitz.com/edit/angular-ftv8ez
I've encountered an issue with a container div that has a fixed width of 300px.
Inside the container, there are box divs also set to a fixed width of 300px.
The container's overflow is set to scroll so that users can scroll if the content overflows.
However, the result is not as expected. The beginning of the container div is cut off, making it impossible to scroll the first box into view.
In order to resolve this issue, simply update the justify-content value of .container from justify-content:center to justify-content:start
As pointed out by @raquelhortab, the current solution being accepted does not account for situations where we specifically want the content to be centered without overflowing. In such cases, a new option has been introduced (since 2018 in Firefox) called the "overflow-position" parameter of the justify-content property, which can be specified before the regular "content-position" value:
justify-content: safe center;
By using this approach, any overflowing content will be treated as if justify-content was set to start.
For more information, you can visit https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#safe
Your CSS code needed some adjustments to fix the issue. Specifically, in the .Box element, you had to modify the height and width values or adjust the width of the scroll container. Instead of setting the size to 300px, I recommended changing it to 500px or less. Additionally, you had placed 4 colors of 100px each, but I corrected the code by changing them to 50px each, resulting in a smooth functioning.
p {
font-family: Lato;
}
.container {
display: flex;
justify-content: start;
width: 300px;
overflow-x: scroll;
}
.red {
background-color: red;
margin-right: 10px;
flex-shrink: 0;
}
.yellow {
background-color: yellow;
margin-right: 10px;
flex-shrink: 0;
}
.blue {
background-color: blue;
margin-right: 10px;
flex-shrink: 0;
}
.green {
background-color: green;
flex-shrink: 0;
}
.box {
width: 50px;
height: 50px;
}Currently working on the landing page design for a new iPhone app and thinking of incorporating a video modal window similar to the one on: . Came across this helpful thread on "Popup Jquery window to play youtube" but unsure how to resize the video to pr ...
Is there a way to assign different CategoryIDs (1, 2, and 3) based on certain conditions and work with varying column widths within <div class="Meta1">? I need to add 2 more CategoryIDs. Any suggestions on how to achieve this? Thank you. if ($ ...
I have a custom-built navbar using bootstrap. On large screens, everything looks as desired with the user dropdown and currency on the right end of the navbar, and the logo on the left. Large However, when viewing on small screens, the hamburger menu appe ...
Currently working on enhancing the appearance of the scrollbar within my ReactJS project. Specifically, I am aiming for a design similar to this example: https://i.stack.imgur.com/2Q0P4.png Experimented with CSS properties like -webkit-scrollbar, -webki ...
How can I apply a CSS property to only the second element in this array? I have defined a global variable for the array like this: <canvas id="canvas"></canvas> <script> var paddles = [2], // Array containing two paddles function up ...
When attempting to decode characters using $sanitize, I encountered a problem. I must use the $sanitize service instead of ng-bind-html, yet I am getting different results with each one. Despite ng-bind-html utilizing $sanitize internally, the outputs are ...
As I am diving into learning how to use the HTML5 canvas element, I have had success in drawing rectangles, utilizing getImageData, manipulating pixels, and then using putImageData to witness the color changes of the rectangles, among other capabilities. ...
My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...
I've encountered a CSS dilemma. I have a collection of images that I want to present side by side using an unordered list within a fixed width container. The goal is to have 3 images per row before moving on to the next set of 3 images. Each list ite ...
I'm curious about how the cool turn on/off switch button actually works. Take a look at for reference. I'm interested in implementing a prevention check to confirm whether the user truly wants to switch the button. Here's a snippet of the ...
I am inquiring about the functionality of html and py script. .... The user enters 3 values for trapezoidal data from the html form: height, length of side 1, and length of side 2, then clicks submit. The entered values are then sent to be calculated using ...
There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...
I recently created a carousel slider that seems to be behaving incorrectly when multiple carousels are added. It should slide by one item at a time. For instance, with only one carousel, it slides by one item; with two carousels shown, it slides by two ite ...
Is there a way to prevent text columns from getting too narrow when an image is floated to the left? Typically, text flows around the image in a column of HTML content as expected. However, when the image is almost as wide as the column itself, the text e ...
I am facing an issue with my ASP .net core 2.1 app. I have customized the scaffolded crud details page, but I am encountering hurdles with the dl, dt, and dd elements. The text inside dt elements, which display the field names, is appearing next to them o ...
Is there a way to create an HTML anchor tag with a click event that triggers a function without causing the page to reload or refresh? <div *ngIf="showOTPResendText"> <p style="text-align: center;">Please wait {{counte ...
Anion Gap Body Surface Area (BSA) Creatinine Clearance Stack Overflow i want to add "String" Before Text and "String" after end of text. I have Following expression which runs perfectly in excel:- =CONCATENATE("",B1,"") Output:- <string>Anion Ga ...
I have a table data that needs to be dynamically appended. But I want to allow users to add new data using text input and also edit the existing data before and after it's appended. The problem is that when I append new data, it overwrites the previo ...
When I enter an email address, for example: if I enter "abc" it shows an alert saying "please enter a valid email". If I leave it blank and try to submit, it shows an alert saying "email required". But when I click register, the data is saved regardless of ...
The web application I am currently working on was developed approximately 10 years ago and is only compatible with Internet Explorer. My goal is to make it functional in Chrome as well. I am facing a challenge regarding the "text" property of IXMLDOMEleme ...