I'm looking to animate the position of borders on my ol element, but they currently scroll with the content. Is there a way to make them fixed without adding another node?
div{
height: 100vh;
width: 30%;
}
ol{
height: 60%;
width: 100%;
overflow-y: scroll;
position: relative;
}
ol::before,
ol::after{
content: '';
height: 5px;
background: red;
width: 100%;
position: absolute;
}
ol::after{
bottom: 0;
}
li{
height: 300%;
}<div>
<ol>
<li/>
</ol>
</div>Possible solution: Adjusting Relative Position with Ancestors
When working with an element set to position: absolute, it's important to note that its position is determined in relation to the closest ancestor with a non-static position. By setting the parent element (the div) to position: relative instead of leaving the position of the ol undefined, we can prevent the scrolling behavior typically associated with absolutely positioned elements like the ol tag. This allows us to dictate the top and bottom values for pseudo-elements based on the div/parent rather than the ol itself, necessitating an adjustment to the bottom value. For example, setting bottom to 40% would offset the height previously defined as 60% for the ol.
div {
height: 100vh;
width: 30%;
position: relative;
}
ol {
height: 60%;
width: 100%;
overflow-y: scroll;
}
ol::before,
ol::after {
content: '';
height: 5px;
background: red;
width: 100%;
position: absolute;
}
ol::after {
bottom: 40%;
}
li {
height: 300%;
}<div>
<ol>
<li/>
</ol>
</div>If this explanation doesn't fully meet your needs, I am open to clarifying any points and updating my response accordingly. Additionally, I will endeavor to include relevant references in future updates.
I'm in the process of developing a website and I am interested in incorporating a preloader to display before the entire page loads. My goal is to instruct the browser to only parse my initial <head> tag while disregarding the rest. Here's ...
I have created a user update page on my website which includes a 'change image' section. It works fine, but when I click the "CLEAR" button, I encounter the following error: ValueError at /user/update The 'image' attribute has no file a ...
Recently, I began my journey into website creation and encountered an issue with a comment box designed for entering blog posts. When inputting an entry with 3 lines in the MySQL table, it appeared correctly. However, upon attempting to output the data, ...
My goal is to place a rotated headline next to some text, but I'm facing challenges with positioning when the page is resized. While absolute positioning works easily in a static scenario (left picture), it fails when the page size changes (right pict ...
Homepage Component <Box component="fieldset" sx={{borderRadius:2, height:"100%"}}> Application Structure Component <Grid container> <Grid item xs={4} > <Root/> </Grid> ...
Images are being shown inside an HTML table using PHP code : This is the code for the table : for ($i = 0; $i < $data['list']['cnt']; $i++) { $tabRows[$i][1]['width'] = "45%"; $tabRows[$i][1][&apos ...
Currently, I have set up a 2-way binding for the input to appRequestParams.appName. The fetchApps() method is called on every keyup event. My goal is to debounce the input so that backend HTTP requests are not triggered immediately upon every keyup. I ha ...
Through dedication and hard work, I managed to create a customized form with images that display correctly in Firefox, Chrome, and Internet Explorer's compatibility mode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...
I need the "div 1" label to always appear on the right side of the divs, while still maintaining responsiveness. Is there a way to achieve this effectively? Struggling to find a wrapper that meets my responsiveness requirements. #wrapper { width: aut ...
I encountered an issue with a Bootstrap progress bar that is causing conflicts with my CSS. I am attempting to move the CSS to a separate stylesheet instead of embedding it in my ejs file. However, when I try to link it using <link href="/views/s ...
Why isn't my list vertically aligned? Even though I set ul and li to be 100% height of the parent, they only appear to be 100% of themselves. I'm trying to avoid using margins or padding to achieve vertical alignment. How can I make them 100% of ...
I have a fixed header with a large text. I would like the text to decrease in size as someone scrolls down, and return to its original size when the scroll is at the top. The CSS applied when scrolling down should be: font-size: 15px; padding-left: 1 ...
When adjusting the browser size, the images are resized which is great because it's exactly what I intended. However, the lower part of the black area does not resize accordingly. This results in a black area appearing under the images when viewed on ...
If there are 10 <p> tags, is it possible to limit them to only 5 by hiding the other 5 using CSS? Do I need to add a class five times with nth-child? Can CSS accommodate conditions for this purpose? Considering that the number of <p> tags is ...
Currently, I am working on a project that involves using html, scss and javascript, along with Gulp.js. I am now considering incorporating the Angular Flex layout library into my project and I'm curious if it is feasible and advisable to do so. Plea ...
I've explored various solutions for the same issue: 2013 Stackoverflow Question 2013 GitHub Problem However, none of them seem to be effective for me except for the less than ideal workaround of body { overflow-x: hidden;} Despite downloading th ...
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="boxes"> <div class="red" style="width: 300px; height: 300px; color: red"></div> <div class="blue ...
I am excited about trying out some eye-catching experimental CSS features like border-radius (rounded corners) and gradients to enhance the look of my webpage. However, it's disappointing that Internet Explorer does not yet support these features. Alt ...
My webpage is structured with a sidebar and content section, using flex display with the sidebar set to 0.15 flex and the content set to 0.85 flex. I want this page to be full width of the viewport. The issue arises when I try to incorporate a table into ...