Looking to create vertical space for elements with position:absolute and changing heights using just CSS. Any clever techniques involving containers or display properties that could be helpful?
Looking to create vertical space for elements with position:absolute and changing heights using just CSS. Any clever techniques involving containers or display properties that could be helpful?
Unfortunately, when you use absolute positioning, your element stops taking up space by definition. So, no, it's not possible to achieve this effect only through CSS.
One way to solve this issue is by using jQuery or plain JavaScript. My approach would be to include a space element alongside each vertically positioned element. Wrap both the space element and the absolutely positioned vertical element within a relatively positioned div. Upon page load, adjust the height of the space element to match the height of the vertical element.
When using the CSS property position: absolutefloat to allow the elements to occupy space, while setting each element's position:relative.
div.animate-me {
width: 300px;
margin: 20px;
float: left;
left: -1000px; // Start offscreen
position: relative;
border: 1px solid red;
visibility: hidden
}
$('div').css().animate({
left: 0
});
While not a universal solution, in cases where the position: absolute element maintains a fixed aspect ratio (like an image or video resizing responsively with height: auto), you can leverage the padding-bottom technique to create a spacer element that mirrors the same aspect ratio. This allows it to adjust its size proportionally alongside the absolute element:
.spacer {
height: 0;
padding-bottom: 125%; /* for a 1.25 height/width ratio */
}
The reason this works is that padding-bottom using a percentage is interpreted relative to the element's width.
It is important for your specific layout to properly position the spacer so that it aligns perfectly with or beneath the position: absolute element, filling the space that may have been occupied by the absolute element if it were not positioned absolutely.
I'm currently working on a Codepen project where I want to use JavaScript to change the image of an element with the id "chrome". However, my code doesn't seem to be working as expected. Can someone help me troubleshoot and fix this issue? Your a ...
Is it possible to change the scrolltop value dynamically based on a percentage of the user's screen size? I've been trying to achieve this using JS but haven't had any luck. Here is a link to a codepen that showcases the issue: [link] (http ...
I have been using various applications to evaluate the quality of my websites, and many of the improvements suggested relate to missing http headers. Some examples include Content-Security-Policy, Charset, etc... I decided to visit the Wikipedia page on ...
I have a question regarding the following HTML structure: <div class="a"> <div class="b"></div> <div class="c"></div> </div> My goal is to apply a specific CSS rule only within the a class: .b + .c { margin-le ...
I am a newcomer to nodejs and facing a roadblock in completing my project. I have been stuck for almost 2 days trying to resolve an issue with POST requests not being listened to by nodejs. Despite console logging, I keep getting a 405 error page. Here&ap ...
Recently, I developed an Angular material module similar to a core module. import { NgModule} from '@angular import {MatCheckboxModule} from '@angular/material/checkbox'; @NgModule({ imports: [ MatCheckboxModule ], exports: [ ...
I'm looking to allow users to upload images, save them as IFormFile, and then store them in a database. Here's what I have so far: In the product controller, there is only an add action for both get and post methods, the product model, and the a ...
This is my first time asking a question, so please forgive any mistakes... I am attempting to create a website using HTML, CSS, and JavaScript on my Raspberry Pi with Apache2. I have written a script for an automatic iframe height function based on the co ...
Here I am facing a unique situation where I am attempting to align my button input[type="submit"] to the right side. I have allocated space for it and therefore trying to float the button to the right so that it can be positioned next to my input text. U ...
I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...
I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...
When it comes to optimizing images, Next.js offers an Image component that lazy loads images and includes a srcset for a particular image. However, there are instances where we need to serve different images based on the device being used (art redirection ...
How can I create a grid with 4 items where the fourth item is taller than the others, determining the overall height of the grid? Is it possible to limit the height of the fourth item (h4) to match the height of the first item (h1) so that h4 = Grid height ...
I have a large number of links on the same page that I would like to clean up by removing everything from specific characters until the end of the URL. Currently, there are too many links like this scattered throughout my page. The string "$amp;rs" or "&a ...
It seems like my for loop is not always iterating 7 times as intended. Sometimes it runs with 5 iterations, other times with 4 or 3. This is the JavaScript code I am using: var start = new Date().getTime(); var end = new Date().getTime(); function timeT ...
I have a string with mixed content of HTML tags and text. Here is an example: var str = "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height=" ...
The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...
I am attempting to create a clickable URL that opens in a new window. The URL is being displayed and updated on my HTML page in the following manner: Python Code: def data_cb(): return jsonify(waiting=await_take_pic()) Javascript Code: jQuery(d ...
If the Font Awesome icons are displaying as blank squares in all browsers despite correctly linking the stylesheet and attempting to install the package through npm which results in a npm ERR! code E401, it can be frustrating. Even after checking the brows ...
I'm struggling with changing the CSS href in the code-behind of my .ASPX page. I've tried various methods but haven't found a solution that works as intended. HTML Markup: <link id="linkCSS" runat="server" href='/css/1.css' re ...