Bootstrap input-group problem

I am using EasyAutocomplate with Bootstrap and if I use an input box without any class or format it works but when I put the input in a div with input-group class (from Bootsrap) EasyAutocomplate does not show first item from Ajax request.

I tried adjectWith as suggested here https://github.com/pawelczak/EasyAutocomplete/issues/154 But it did not work for me.

Here is html

<div class="input-group"> <input type="text" id="wordAutoComplete" name="word" class="form-control" placeholder="Word or Phrase" aria-label="..."> <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> <a asp-controller="Dictionary" asp-action="Index" class="btn btn-default" title="How to use Word/Phrase search ?"><i class="fa fa-question"></i></a> </div> </div>

[shazzababs]

I found a workaround by doing the following:

Add the following line to the easy-autocomplete options object:

cssClasses: "form-control form-control-sm fix-autocomplete",

Add the following CSS:

.fix-autocomplete {
  padding : 0px !important;
  margin : 0px;
  border-width : 0px;
}

.input-grp-autocomplete
{
	padding-bottom: 2px !important;
}

Add the class input-grp-autocomplete to the input control of the input group. Note that I am using form-control-sm so you may have to adjust the input control padding more or less if you are using the large version.

Be nice to see a proper fix though.

[igorlovric]

Regarding first problem (First item not visible), I know what is the problem, but I don’t know how to fix it. If you use input-group, (easy-autocomplete-container top)=(your input top), and considering easy-autocomplete-container z-index is less then your input z-index, first item is invisible, actually it’s overlapped by input. Try playing little bit with, CSS, I think it could be fixed.

And second problem… width of input… I use Bootstrap 3, but it should work for bootstrap 4 too. Just add fallowing CSS:

.easy-autocomplete {
    width: auto !important;
}