1

I have a page that if viewed with Chrome shows weird problems with layout. Other browsers do not have this problem.

Vertical position of element containing text changes randomly. You have to look at the example to understand what happens exactly.

Try for example to enter a "y" letter into the filter field, layout messes up. With other letter layout behaves correctly. How can I fix it? Can you suggest a workaround?

Debug didn't help, it seems a Chrome bug. Can you confirm?

function myfilter(list, filt) {
  origin = document.getElementById(list)
  var label = origin.getElementsByTagName("label");
  for (var i = 0; i < label.length; i++) {
    var supspan = label[i].parentNode
    var subspan = label[i].getElementsByTagName('span')[0]
    if (subspan.lastChild.textContent.toLowerCase().indexOf(filt.toLowerCase()) > -1)
      supspan.style.display = 'inline'
    else {
      supspan.style.display = 'none'
    }
  }
}
BODY {
  font-family: arial, sans-serif;
  font-size: 12px
}

DIV.lists {
  width: 500px;
  background-color: #ddd;
  margin-top: 100px;
}

.box1 {
  width: 230px;
  height: 190px;
  overflow-y: auto;
  display: inline-block;
  background-color: #ccc
}
<div class="lists">
  <div id="x-99" class="box1">
    <span><label><input type="checkbox" style="display:none"><span>An eagle is flying hign on mount Kailash</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>BTRHGG TWWS to get together first six months - DAY 1</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>BTRHGG TWWS to get together first six months - DAY 2</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>AGC Opening 2015 – The strength to be independent</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Contributes antiwar nuclear</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Contributes course dfa number 1</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Elements for Risk analysis and risk management</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Elements for the comprehension scenery</span></label><br></span>
  </div>
  Filter: <input type="text" oninput="myfilter('x-99',this.value)">
</div>
Niente0
  • 504
  • 3
  • 11
  • Thanks isherwood but this question is not a duplicate, this problem is related to Chrome browser only, while on Firefox and Edge it works correctly. – Niente0 May 09 '19 at 09:49

0 Answers0