Question 289596 in CSS Question posted in
Some basic documentation can be found here.

divs are not sorted properly when searching with html css js

As can be seen here, there is probably a problem in my css and js code and I cannot find this problem. When I make a call, there is a problem as you can see in the photo below. Results not sorted properly within divs

How can I solve this problem?

enter image description here

document.addEventListener("DOMContentLoaded", function () {
  var count = 0;
  var table=document.createElement("table");
  for(var i=0;i<(10);i++){ //SATIR
var tr=document.createElement("tr");
table.appendChild(tr);
 for(var j=0;j<3;j++){ // SÜTUN
     var td=document.createElement("td");
        td.innerHTML=
        '<div id="'+count+'" class="emote_container">'+

            '<span id="'+count+'"  class="emote_name_lbl"> '+count+' </span>'+
        '</div>';

     tr.appendChild(td);
     count++;
    }
}
    document.getElementById("emotes_area").innerHTML="";
    document.getElementById("emotes_area").appendChild(table);
});


document.getElementById("input_search").addEventListener("input", function() {
  var searchValue = this.value.toLowerCase(); // Get the lowercase value of the input
  var emoteContainers = document.getElementsByClassName("emote_container");

  for (var i = 0; i < emoteContainers.length; i++) {
  var emoteName = emoteContainers[i].getElementsByClassName("emote_name_lbl")[0].innerText.toLowerCase();

  if (emoteName.includes(searchValue)) {
      emoteContainers[i].style.display = "flex"; // Show the emote container
  } else {
      emoteContainers[i].style.display = "none"; // Hide the emote container
  }
  }
});
.emotes_area{
  position: absolute;
  width: 404px;
  height: 703px;
  top: 165px;
  left: 62px;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
}

.emotes_area::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.25);
}

.emotes_area::-webkit-scrollbar
{
width: 1px;
background-color: #00000000;
}

.emotes_area::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
background-color: rgb(255, 255, 255);
}

.emote_container{
  position: relative;
  width: 123px;
  height: 131px;
  flex-shrink: 0;
  background: radial-gradient(82.29% 82.29% at 50% 50%, rgba(143, 143, 143, 0.5) 10%, rgba(255, 255, 255, 0.00) 90%);
  box-shadow: inset 0 0 0 1px  #81818173;
  display: flex;
  top: 0px;
  cursor: pointer;
  margin: 2.7px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emotes Area</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="emotes_area"  id="emotes_area">
<!-- <div class=""></div> -->
</div>

<input class="search_input" id="input_search" type="text" placeholder="Search Something...">

<script src="scripts.js"></script>
</body>
</html>
Tags:

3

Answers


  1. 0

    Sometimes "less is more". In the following snippet I used display:inline-block for the inner div elements. No flex or grid mechanics needed. And – of course – no strict corset of table-related elements, as this would prevent any re-shuffling of the filtered inner divs.

    document.addEventListener("DOMContentLoaded", function () {
  let html="";
  for (let count = 0; count<30; count++) {     
    html+='<div id="'+count+'" class="emote_container">'+
          '<span id="'+count+'"  class="emote_name_lbl"> '+count+' </span></div>';
  }
  document.getElementById("emotes_area").innerHTML=html;
});


document.getElementById("input_search").addEventListener("input", function() {
  var searchValue = this.value.toLowerCase(); // Get the lowercase value of the input
  var emoteContainers = document.getElementsByClassName("emote_container");

  for (var i = 0; i < emoteContainers.length; i++) {
  var emoteName = emoteContainers[i].getElementsByClassName("emote_name_lbl")[0].innerText.toLowerCase();

  if (emoteName.includes(searchValue)) {
      emoteContainers[i].style.display = ""; // Show the emote container
  } else {
      emoteContainers[i].style.display = "none"; // Hide the emote container
  }
  }
});
    .emotes_area{
  position: absolute;
  width: 404px;
  height: 703px;
  top: 165px;
  left: 62px;
}

.emotes_area::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.25);
}

.emotes_area::-webkit-scrollbar
{
width: 1px;
background-color: #00000000;
}

.emotes_area::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
background-color: rgb(255, 255, 255);
}

.emote_container{
  position: relative;
  width: 123px;
  height: 131px;
  background: radial-gradient(82.29% 82.29% at 50% 50%, rgba(143, 143, 143, 0.5) 10%, rgba(255, 255, 255, 0.00) 90%);
  box-shadow: inset 0 0 0 1px  #81818173;
  top: 0px;
  cursor: pointer;
  margin: 2.7px;
}
.emotes_area div {display:inline-block;}
    <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emotes Area</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="emotes_area"  id="emotes_area">
<!-- <div class=""></div> -->
</div>

<input class="search_input" id="input_search" type="text" placeholder="Search Something...">

<script src="scripts.js"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0 
        document.addEventListener("DOMContentLoaded", function () {
  var count = 0;
  var countOuter =0;
  var table=document.createElement("div");
  table.classList.add("parent-container")
  for(var i=0;i<(30);i++){ //SATIR
    
var tr=document.createElement("div");
tr.classList.add("child", "childno")
tr.classList.add(countOuter)
    table.appendChild(tr);
            tr.innerHTML=
            '<div id="'+count+'" class="emote_container">'+

                '<span id="'+count+'"  class="emote_name_lbl"> '+count+' </span>'+
            '</div>';
        count++;
        countOuter++;
    
    }
    document.getElementById("emotes_area").innerHTML="";
    document.getElementById("emotes_area").appendChild(table);
});


document.getElementById("input_search").addEventListener("input", function() {
  var searchValue = this.value.toLowerCase(); // Get the lowercase value of the input
  var emoteContainers = document.getElementsByClassName("child");

  for (var i = 0; i < emoteContainers.length; i++) {
  var emoteName = emoteContainers[i].getElementsByClassName("emote_name_lbl")[0].innerText.toLowerCase();

  if (emoteName.includes(searchValue)) {
      emoteContainers[i].style.display = "flex"; // Show the emote container
  } else {
      emoteContainers[i].style.display = "none"; // Hide the emote container
  }
  }
});
     .emotes_area{
  position: absolute;
  width: 404px;
  height: 703px;
  top: 165px;
  left: 62px;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
}

.emotes_area::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.25);
}

.emotes_area::-webkit-scrollbar
{
width: 1px;
background-color: #00000000;
}

.emotes_area::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
background-color: rgb(255, 255, 255);
}

.emote_container{
  position: relative;
  width: 123px;
  height: 131px;
  flex-shrink: 0;
  background: radial-gradient(82.29% 82.29% at 50% 50%, rgba(143, 143, 143, 0.5) 10%, rgba(255, 255, 255, 0.00) 90%);
  box-shadow: inset 0 0 0 1px  #81818173;
  display: flex;
  top: 0px;
  cursor: pointer;
  margin: 2.7px;
}

/* New CSS */
.parent-container {
    display: flex;
    flex-wrap: wrap;
}
.child {
    max-width: 33.33%;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="emotes_area"  id="emotes_area">
        </div>
        
        <input class="search_input" id="input_search" type="text" placeholder="Search Something...">
        

</body>

</html>
    Login or Signup to reply.
  3. 0

    You may use CSS display: grid property out here to achieve the similar type of design you are looking for and do away with Table structure.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search