How do I fix searchbar breaking styles

Issue

I was making a way to search through a list of YouTube videos on my site, but I found that whenever I type something in the search bar it breaks the wrapping/styling of the videos.

Before I type

After I type

I don't really know javascript well at all, so it could be a problem with that.

This is my css/html/js for the videos/search:

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: left;
    width: 270px;
}
img {
    width: 256px;
    height: 144px;
}
.meta {
    display: block;
}

<div class="item" style="display: none;"><img src="https://i.ytimg.com/vi/XXXXX/hqdefault.jpg"><span class="meta">Title</span><div class="meta"><span>ID</span><span>&nbsp;&nbsp;·&nbsp;&nbsp;</span><span>Date</span></div><br><br></div>

function search_videos() { 
    let input = document.getElementById('search-bar').value 
    input=input.toLowerCase(); 
    let x = document.getElementsByClassName('item'); 
      
    for (i = 0; i < x.length; i++) {  
        if (!x[i].innerHTML.toLowerCase().includes(input)) { 
            x[i].style.display="none"; 
        } 
        else { 
            x[i].style.display="list-item";                  
        } 
    } 
}

I want it to show up like the first image when searching and not one video on each line.

Solution

To fix this issue, you can modify your JavaScript function to set the display style for matching videos to "inline-block" instead of "list-item." Here's an updated version of your function:

function search_videos() {
    let input = document.getElementById('search-bar').value;
    input = input.toLowerCase();
    let x = document.getElementsByClassName('item');

    for (let i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display = "none";
        } else {
            x[i].style.display = "inline-block"; 
        }
    }
}

Answered By - Mahesh Prajapati