Height of parent block grows when child block expands (positioned absolutely)

I am facing a situation where I need to make an invisible block expand on hover of its parent block. The parent block has a fixed width, while the expanding child block needs to be full screen width, therefore it is positioned absolutely. However, when the element expands, it covers the content underneath. I tried increasing the height of the parent block with jQuery by adding the parent's height and the height of the expanding child. But because the animation uses max-height, jQuery ends up taking 0 as the child's height.

Below is a sample code snippet and a link to the demo:

<div>
    <ul class="list">
        <li class="list-el">
            <div class="el-top">Expand 1</div>
            <div class="el-bottom">Cupcake liquorice cupcake sweet roll ice cream caramels. 
                Lollipop dragée chupa chups. Sugar plum candy jelly-o bonbon gummies caramels.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
            </div>
        </li>
        <li class="list-el">
            <div class="el-top">Expand 2</div>
            <div class="el-bottom">Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
            </div>
        </li>
    </ul>
</div>

CSS:

ul{
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}
.list{
    width: 100%;
    padding: 0;
}
.list-el{
    width: 100%;
    height: 75px;
    background: #ff00ff;
    margin-top: 10px;
}

.el-top{
    width: 100%;
    text-align: center;
    line-height: 75px;
}

.el-bottom{
    text-align: center;
    -webkit-transition: max-height 1.5s ease;
    -moz-transition: max-height 1.5s ease;
    transition: max-height 1.5s ease;
    position: absolute;
    background: #f0fff0;
    top: auto;
    left: 0;
    width: 100%;
    text-align: left;
    height: auto;
    max-height: 0;
    overflow: hidden;
}

.list-el:hover .el-bottom{
    max-height: 700px;
}

Any ideas or suggestions on how to increase the parent's height (using CSS or JavaScript/jQuery) in the same animated manner?

jqueryhtmlcsscss-animations

Answer №1

It seems like your questions are not entirely clear to me, but I suggest sticking with CSS instead of using javascript.

The issue you might be facing is that the 'position:absolute' of your hidden content does not occupy the entire height of the li element because it is outside the normal html flow.

To resolve this, you can refer to this FIDDLE, where I recommend applying the 'position:absolute' to the li elements instead. This way, it becomes easier to position the li's accurately as their height is defined in relation to their parent ul which now requires 'position:relative'.

All you need to do now is add:

.list-el:hover {
    height:auto;
    max-height: 700px;
}

With the hidden content being relatively positioned, it will automatically adjust to fill the li element.

Note: I included 'z-index:1' in the first li element so that it always stays on top. However, if you rearrange the order of li elements in the html, the outcome will remain the same without requiring a z-index (as the last element will naturally be on top).

Answer №2

After reviewing the link you shared, my understanding is that you are looking to expand element 2 in a way that leaves enough space for the "el-bottom" class to expand as well.

To achieve this, I utilized the flexbox feature of CSS3 to automatically adjust the position of items following the expanding item.

You can find more information about flexbox here.

Based on the code provided, here are the steps necessary to make everything work smoothly:

  • Add the "display: flex" property to the container class "list".
  • Add the "flex-direction: column" property to the container class "list" to arrange items vertically within the list.
  • Include the "position: relative" property for both "list-el" and "el-bottom" classes to ensure that the sizes of these elements are taken into consideration to prevent overlapping with the next list item.

Below is the updated code snippet incorporating these changes:

ul {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
}
.list {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}
.list-el {
  width: 100%;
  background: #ff00ff;
  margin-top: 20px;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  transition: all 1.5s ease;
  position: relative;
}
.el-top {
  width: 100%;
  text-align: center;
  line-height: 75px;
}
.el-bottom {
  text-align: center;
  -webkit-transition: max-height 1.5s ease;
  -moz-transition: max-height 1.5s ease;
  transition: max-height 1.5s ease;
  position: relative;
  background: #f0fff0;
  top: auto;
  left: 0;
  width: 100%;
  text-align: left;
  max-height: 0;
  overflow: hidden;
  margin-top: 10px;
}
.list-el:hover .el-bottom {
  max-height: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class="list">
    <li class="list-el">
      <div class="el-top">Expand 1</div>
      <div class="el-bottom">Cupcake liquorice cupcake sweet roll ice cream caramels. Lollipop dragée chupa chups. Sugar plum candy jelly-o bonbon gummies caramels. Jelly icing tiramisu candy chupa chups chocolate bar. Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow
        cookie. Lollipop sugar plum lollipop jelly lollipop pudding. Tart jelly-o gummi bears sweet roll gummi bears. Jelly icing tiramisu candy chupa chups chocolate bar. Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. Lollipop
        sugar plum lollipop jelly lollipop pudding. Tart jelly-o gummi bears sweet roll gummi bears.
      </div>
    </li>
    <li class="list-el">
      <div class="el-top">Expand 2</div>
      <div class="el-bottom">Lollipop sugar plum lollipop jelly lollipop pudding. Tart jelly-o gummi bears sweet roll gummi bears. Jelly icing tiramisu candy chupa chups chocolate bar. Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. Lollipop sugar plum
        lollipop jelly lollipop pudding. Tart jelly-o gummi bears sweet roll gummi bears. Jelly icing tiramisu candy chupa chups chocolate bar. Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. Lollipop sugar plum lollipop jelly
        lollipop pudding.
      </div>
    </li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the complete number of rows associated with a Model in a JQuery Data Table

How can I retrieve the total number of rows in the result set while ensuring that the datatable search functionality also works? Currently, I am only able to display the first page of results after filtering using: OFFSET AND FETCH The code snippet below ...

c#jqueryasp.netdatatabledapper

Is it possible to use an input value to rotate an element?

I'm attempting to rotate a red circle with the ID of outer using Input[type=range]. I've tried selecting the circle's style, then transforming it based on the input value, but it needs to be within the parentheses of rotateZ(), which require ...

javascripthtmlcssdom

Create code with numerical markers that have not been highlighted or copied

When I want to show lines with line numbers, I typically use this template for each line: <div><span style="display: inline-block;width: 50px;">1</span><span>line1</span></div> <div><span style="display: inline ...

javascriptjqueryhtmlcssxhtml

What is the best way to store dropdown values from a PHP foreach loop into local storage?

Within my shopping cart, I have added products that are stored in sessions. https://i.sstatic.net/qxz2V.png I am looking to save the selected options from all dropdowns even after the page is refreshed. When I refresh the page, my sessions need to be up ...

phpjqueryajax

How can I verify if an SVG file has a reliable source? (having troubles converting SVG to canvas)

While attempting to use an SVG generated by a chart plugin (https://wordpress.org/plugins/visualizer/), I am facing issues retrieving the source of the SVG-image being created. Interestingly, when using other SVGs with the same code, everything works perfe ...

javascriptjqueryhtmlcanvassvg

How to perfectly align a full-width div with a div of specific width

Consider this scenario: .d1 { width: 100px; float: left; } .d2 { width: auto; float: left; } <div class="d1">Fixed Content</div> <div class="d2">This content should expand to fill the rest of the page vertically.</div> This setu ...

csshtml

As soon as I insert an image, the text on the right automatically moves to the bottom

I'm going crazy over this issue. My navigation bar has three div elements, each with text aligned both vertically and horizontally at the center. However, when I insert an image (an SVG icon of a zoom lens) before the "search" text, it shifts the tex ...

htmlcssimageflexboxvertical-alignment

Implementing Voting Functionality with Ajax Submission

Can anyone help me with getting ajax functionality to work properly for my Acts_As_Votable buttons? Here's the current code I have: post_controller.rb def favorite @post = Post.find(params[:id]) @post.upvote_from current_user respond_to do |f ...

javascriptjqueryruby-on-railsajax

Ways to ensure that floating blocks remain in the same row using CSS

Check out my demo here: http://jsfiddle.net/3c40tafe/1/ Is there a way to align the icon, file name, and description in a single row? The icon and title should have fixed widths, while the description paragraph should take up the remaining width. Here&ap ...

htmlcss

I am looking to dynamically add values into a hash map

var markerList1={}; var markerList=[]; and incorporating iterator values from a single for loop function addSomething() // this function will run multiple times from a for loop { image ='../css/abc/'+image[iterator]+'.png&apos ...

javascriptjquery

The process of uploading a file is interrupted by an AJAX Timeout

My HTML form includes a file input field that utilizes AJAX to upload the selected file, complete with a progress bar. However, I encountered an issue where the request would hang without any response. To prevent this from happening in the future, I aim t ...

javascriptphpjqueryajax

Full-width slider using Jquery that features a perfectly centered image

I have spent hours searching on Google trying to make an image slider that slides in from the right side of the screen, goes to the middle of the viewport, and then slides out to the left. Unfortunately, I haven't been able to find exactly what I&apos ...

jqueryslideshow

Is there a restriction on the number of routes available from Google Maps Directions Service?

Utilizing the Google Maps Directions API, I am able to calculate the distance between the current user's location and various stores. Everything functions properly until I exceed 10 store locations, at which point the API ceases to operate due to its ...

javascriptjqueryapigoogle-mapsgoogle-maps-api-3

"Obtain a DOM element within an Angular directive by using the jQuery find method

When inspecting the DOM, I can see the element anchor tag present but cannot retrieve it using jquery.find(). The console returns a length of 0, preventing me from initializing angular xeditable on that element. angular.module('built.objects') ...

javascriptjqueryangularjsx-editable

How can I utilize the LED flash on a Windows Phone using WinJS?

Currently delving into the world of WinJS and endeavoring to create an application that involves operating the LED Flash. I am seeking guidance on how to properly access the LED Flash functionality to allow for toggling it ON or OFF. Your insights on how ...

javascripthtmlcsswindows-phonewinjs

Tips for Showing Certain Slides When the Page Loads

When using jQuery filter effects to organize div slides on a page, I encountered an issue where all the divs containing different slides are displayed on page load instead of just the default chosen ['active'] div. The filter effect itself is fun ...

javascriptjquerycsshtml

The styled horizontal list item has a background color that is not covering the entire

After setting up my CSS, I noticed a discrepancy in how the background color behaves when hovering over links in the navigation versus links in the footer. While the entire "button" area is filled with the background color in the nav, only the space behind ...

htmllistcoding-stylecss

placing a see-through overlay onto a text-filled div

I have a text within a div and I am looking to overlay a transparent image on this div. When the image is clicked, the content of the background div should be displayed with the div changing its width to show the entire text with a scroll bar. Does anyone ...

javascripthtmlcss

New and improved method for showcasing the switching of two PHP variables using jQuery Ajax

Obtaining two random values from a table in the same row can be achieved using PHP and MySQL. For example: <?php $result = mysql_query("SELECT * FROM people ORDER BY RAND() LIMIT 1", $connection); $row = mysql_fetch_array($result); echo $ro ...

phpjavascriptjqueryajax

Creating a basic HTML form that interacts with PHP and MySQL. How can I ensure NULL values are preserved for empty fields within the database?

I recently created a basic HTML form that includes input boxes and text areas. The data from these fields is then inserted into a MySQL database using a PHP script. One issue I encountered is that even when certain fields are left empty, something like an ...

phphtmlmysqlforms