Question

I’m trying to create a search bar for a div that contains several images. I have the search working, but when it hides the elements that don’t fit the search, there are just spaces between the elements. What I want to happen is to have the remaining elements reposition themselves next to each other. I made a jsFiddle to show what I have so far. Try entering “a” or “b” into the search field and you’ll see what I mean.

Thanks for any help.

Answer 1

Use display: none instead of visibility: hidden.

---

• display: none removes the element from the DOM. Example:

  .cheshire_cat {
      display: none;
  }
  

  The element will be completely gone, like if it wasn’t there.

• visibility: hidden acts like the element is completely transparent. Example:

  .ninja {
      color: black;
      visibility: hidden;
  }
  

  The element will still be there, at the same position, occupying the same space, but you just won’t be able to see it.