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 run a unique type of platform that allows users to publish their own blog posts using a WYSIWYG editor, and then share them on the site. My top priority is to ensure security against XSS attacks, which is why I am looking for alternatives to using v-htm ...
When zooming in and out on a webpage, the menu does not stay fixed to the header image shown in the figure below: The CSS code for this issue is as follows: #navmenu{ z-index:99999; margin-top:40px; position:absolute; width:100%; m ...
Just to clarify, I am looking to dynamically reload another controller with new data after a POST request without refreshing the page. Here is my code: No issues with saving data to the database. Script var app = angular.module('userBase', []) ...
Is it possible to show/hide a div using only CSS based on its ID? Showcasing this functionality in jQuery or vanilla JavaScript is straightforward, but can the same effect be achieved with pure CSS? The checkbox hack requires a specific structure to func ...
Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...
I have recently decided to replace the Jquery UI autocomplete function on my website with HTML5 datalists that load dynamic options. After researching this topic extensively, I came across various answers on Stack Overflow, such as How do you refresh an HT ...
I'm encountering an issue with the LDAP Authentication redirection in my system. When I access Index.php, it correctly redirects me to the login page (login.php). However, after entering my credentials, it fails to redirect me back to the Index Page. ...
Can anyone help me figure out how to add margins to my paragraphs with borders on a website? I've tried using margin in CSS, but it's not working. Here is the HTML code I am using: body{ margin:0px; font-family:Calibri; background ...
Referring to this example: http://jsfiddle.net/CZk8L/4/ I'm puzzled by why the CSS style overflow:hidden is creating extra space at the bottom of the first li. Can anyone shed some light on this? This has been bothering me for hours, as I need the p ...
I recently encountered an issue with the Multiple Dates picker for jQuery UI date picker. It seems that the developer who created it has not updated it in quite some time, resulting in pre-highlighting dates no longer functioning properly. To address this ...
I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...
I'm facing an issue where my PHP code is not inserting any data. I have a form that displays values, but the update code doesn't seem to be working. Can someone please help me with this problem? Here is the PHP code snippet: if (isset($_POST[&ap ...
For a VueJS 2 project, I am tasked with enhancing the display of the first and second elements in an array by making them stand out from the rest. To achieve this, I am utilizing the v-for syntax to iterate over a child component within a parent component. ...
I want to make sure that any characters in my database entry that are not numeric or alphabetic get converted to HTML code. After doing some research, I came up with the following function: Public Shared Function HTMLEncodeSpecialChars(text As String) As ...
I've noticed that when I drag the canvas using -webkit-transform: translate(x,y), an element on the canvas jumps. Are there any suggestions for addressing this issue? ...
JSBIN Is it possible to center the number row without using JavaScript to calculate its position, considering its parent has a fixed attribute? I've tried using CSS properties like margin and text-align with no success. Any suggestions on achieving t ...
My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...
I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...
Struggling with a form that uses HTML PDO and AngularJS for validation. When clicking one checkbox, all other checkboxes get checked as well. Here is my form: <input type="checkbox" name="declaration" id="declaration" ng-m ...
After experimenting with the codes provided in this post, I managed to create the following code snippet: var my_html = this.GetmyReportHtml(); var my_css = this.GetmyReportHtmlCss(); Byte[] bytes; using (var ms = new MemoryStream()) { ...