Styles break when I use input group

[andrewtsar0w]

It worked in https://github.com/bassjobsen/typeahead.js-bootstrap-css for Bootstrap 3.

<div class="input-group input-group-lg">
    <span class="input-group-btn">
      <button class="btn btn-primary" type="button"><i class="fa fa-location-arrow"></i></button>
    </span>
    <input id="typeahead" type="text" class="form-control">
</div>

[bassjobsen]

@kleverigheid thank for posting your image.

First of all you should change your HTML according Bootstrap 4 new classes. Your HTML should like like that shown beneath:

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="typeahead form-control">
</div>

But after that, i agree with you that the styles of the input are broken. The result will look like that shown in the picture below:

I will fix the issue described above asap.

[jonchay]

Hi there, I'm not sure if that's the right fix. There are input-group-addon and input-group-btn, which both are supported in Bootstrap 4. Do you have a recommended fix for input-group-btn?

[rdeputat]

Is any updates?

[yaldabaoth444]

try for input-group-append

.input-group>.twitter-typeahead {
     position: relative;
     -ms-flex: 1 1 auto;
     -webkit-box-flex: 1;
     flex: 1 1 auto;
     width: 1%;
     margin-bottom: 0;
 }
 .input-group>.twitter-typeahead:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 .input-group>.twitter-typeahead>.tt-input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 .form-control.tt-input:focus {
     z-index: 3
 }

[M-A-R-K-13]

Will yaldabaoth444’s excellent contribution be added to the project?

[adslwy]

try for input-group-append

.input-group>.twitter-typeahead {
     position: relative;
     -ms-flex: 1 1 auto;
     -webkit-box-flex: 1;
     flex: 1 1 auto;
     width: 1%;
     margin-bottom: 0;
 }
 .input-group>.twitter-typeahead:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 .input-group>.twitter-typeahead>.tt-input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 .form-control.tt-input:focus {
     z-index: 3
 }

this code saved my life, thank you yaldabaoth444

[yaldabaoth444]

I am glad to help