'How to get this search-results-div to show up on top of content, without interfering with nearby float elements?

I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)

https://jsfiddle.net/dowxw1dz/2/

In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.

The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.

How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar? Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.

HTML:

<div style="width:600px;">

  <input type="button" value="Button!" style="float:right; width:100px;"/>

  <span style="float:right"> Category </span>
  <div class="inputRow">
    <input type="text" id="input"/>
    <div class="searchResults">
      Results!
    </div>
  </div>
</div>
<div style="width:600px;">
  There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>

CSS:

.searchResults {
  position:absolute; 
  top:100%; 
  background-color: white; 
  border: 1px solid black; 
  z-index: 50;
  display: none;
}

.inputRow {
  position:relative;
  overflow:auto;
}

input {
  width: 98%;
}

div {
  z-index: 0;
}

JS:

$("#input").change(function() {
    $(".searchResults").show();
});
htmlcss


Solution 1:[1]

It seems you need to use position fixed instead of position:absolute, and assign top:7% it will work. It's a way around. Still can't figure out why position:absolute is not working. I'm yet in the learning phase.

.searchResults {
  position:fixed; /* instead of : position:absolute;*/
  top:7%;         /* instead of : top:100%;*/
  background-color: white; 
  border: 1px solid black; 
  z-index: 50;
  display: none;
}

Fiddle here : https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/

Solution 2:[2]

The solution was simply to ignore the input element, and put the results in the content below the input, instead.

Unfortunately, that meant that setting the width had to be done in JavaScript instead of simply relying on CSS to do the right thing. I ended up using $(".searchResults").width($("input").width()) in order to make the width of the results match the width of the input. (And I removed the top: 100% from the .searchResults CSS class.)

https://jsfiddle.net/dowxw1dz/7/

<div style="width:600px;">

  <input type="button" value="Button!" style="float:right; width:100px;"/>

  <span style="float:right"> Category </span>
  <div class="inputRow">
    <input type="text" id="input"/>
  </div>
</div>
<div style="width:600px; position:relative;">
  <div class="searchResults">
    Results!
  </div>
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kailas
Solution 2 PotatoEngineer

Related Questions