Enigmatic void appears above row upon removal of content from a single item

Question

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it.

I have found that using flexbox could solve this issue, but I am curious about understanding the underlying cause.

One key detail is that each item has three children - two with position: absolute and one without a specific position.

It seems that setting all children to position: absolute resolves the problem, but I want to know why there is a difference in outcome based on the content being present or not.

You can see the problem in action in this JSFiddle.

HTML Structure:

<div class="context">
    <div class="grid">
        <div class="item">
            <div class="cover">  // has position: absolute
                <h1>Title</h1>
            </div>
            <div class="img-wrapper">  // has position: absolute
                <img/>
            </div>
            <div class="description">  // doesn't have a position defined
                <p>Description...</p>
            </div>
        <div class="item">
            // item content
        </div>
    </div>
</div>

The grid contains 8 items divided into two rows of 4 items each.

CSS Styling:

To achieve this layout, the following CSS rules are applied:

.grid {
  margin-top: 100px;
  font-size: 0; // to get all the items together
  border: 1px solid red;
}

.item {
  width: calc(100% / 4);
  height: 100px;
  position: relative;
  display: inline-flex;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  top: 0;
  bottom: 0;
}

.img-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

img {
  height: 100%;
  width: auto;
  display: block;
  margin: auto;
}

.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Note: Additional CSS styling in the JSFiddle example does not affect the core structure causing the issue.

JavaScript Functionality:

The JavaScript code responsible for moving content to the modal is as follows:

let $itemNode;
let $itemContent;

$().ready(args => {
  let $modal = $('#modal');

  $('.item').click(function() {
    $itemNode = $(this);
    $itemContent = $(this).children();

    $itemNode.css({visibility: 'hidden'});

    $itemContent.appendTo($modal);
  });

});

javascript jquery html css flexbox

Answer 1

Answer №1

Solutions

To overcome this issue, one effective solution involves utilizing flexbox...

Indeed, the problem can be resolved by setting the parent of the items as a flex container:

.grid {
  display: flex;     /* new */
  flex-wrap: wrap;   /* new */
  margin-top: 100px;
  font-size: 0;
  border: 1px solid red;
}

See updated fiddle

An important note here is that each item consists of 3 children. By applying position: absolute to two of them and leaving the third with its default position, the issue is resolved.

Similarly, removing the third div from the document's normal flow effectively eliminates the problem.

Explanation

Initially, each item in the grid is artificially positioned before any alterations are made through scripting.

In essence, the contents of the items (the three child divs) cause a shift in each item's position. However, when these child divs are removed by the script, the items move to their correct locations.

The root of the problem lies within the third child div of each grid item (.description).

When you add visibility: hidden to the grid item without removing the child divs, the layout remains intact. But your script not only hides the visibility but also removes the child divs entirely.

The first two divs (.cover and .img-wrapper) do not cause issues as they are already absolutely positioned and out of the regular flow.

On the other hand, the third div (.description) is an inline child.

With two p children inside ("Description for this item X" and "More info"), the removal of either child disrupts the layout.

This disruption occurs because the div suppresses vertical-align: baseline on the inline-level parent element, causing a gap when removed.

It appears that using values other than baseline for vertical-align solves the issue, as pointed out by @Kukkuz in another answer.

Answer 2

Solutions

To overcome this issue, one effective solution involves utilizing flexbox...

Indeed, the problem can be resolved by setting the parent of the items as a flex container:

.grid {
  display: flex;     /* new */
  flex-wrap: wrap;   /* new */
  margin-top: 100px;
  font-size: 0;
  border: 1px solid red;
}