Question 303113 in Html Question posted in
Some basic documentation can be found here.

Html – How do I fix searchbar breaking styles

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.

Tags:

2

Answers


  1. 0

    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"; 
        }
    }
}
    Login or Signup to reply.
  2. 0

    The issue is you have the blocks initially styled display:inline-block however when you perform your search you are changing the style to display:list-item which creates a bulleted list as you see in your second image. By changing the list-item in the js file to inline-block you can achieve the same styling for your before and after.

    Here is an updat

    function search_videos() { 
    let input = 'title'; 
    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="inline-block";                  
        } 
    } 
}
    div.item {
    vertical-align: top;
    display: inline-block;
    text-align: left;
    width: 270px;
}
img {
    width: 256px;
    height: 144px;
}
.meta {
    display: block;
}
    <button class="" onclick="search_videos()">search</button>
<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>

<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>

<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>

<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>

<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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search