Displaced Hint with Bootstrap 4

[anyhowes]

Hi there,

Thanks for building this nifty autocompleter! I'm really enjoying using it with a little project I'm working on. The only hiccup I've run into so far is that the hint div and span end up getting displayed outside of the input box (specifically, below the input box). This ends up overlapping with the first row of the drop down list (see screenshot). I'm wondering if there is something with Bootstrap 4 (which I'm using) that is interfering with the placement of the hint? If you have any ideas for a fix, they would be greatly appreciated!

Thanks.

[fitiskin]

Forgive me for abandoning the project and answering you a few years later.

Bootstrap 4 example with a hint: https://codesandbox.io/s/jquery-autocompleter-bootstrap-4-died3v?file=/src/styles.css

It doesn't work well actually. The core idea here is to use CSS top property:

CSS

.custom .autocompleter-hint {
  top: -37px; /* <-- HERE */

  color: #6c757d;
  text-align: left;
  line-height: 1.5;
  left: 0;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}