Alignment issue with input-group-btn

[ghost]

In reference to issue #22 , when I attempt to use an input-group-btn with Typeahead, the button does not align properly with the textbox. Add-ons work fine.

Here is the code:

<div class="form-group">
     <div class="input-group">
        <input type="text" id="TextboxTeamName" class="typeahead form-control" autocomplete="off" />
        <span class="input-group-btn">
            <button id="teamsearchbtn" type="button" class="btn btn-default"><i class="hci hci-search"></i></button>
        </span>
    </div>
</div>

Which renders as:

<div class="form-group">
     <div class="input-group">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" id="TextboxTeamName" class="typeahead form-control tt-input" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-teams"></div></div>
        </span>
        <span class="input-group-btn">
            <button id="teamsearchbtn" type="button" class="btn btn-default"><i class="hci hci-search"></i></button>
        </span>
     </div>
</div>

I am using the latest version of Bootstrap, Typeahead, and this CSS. There is no custom CSS.

I can fix this issue by adding a 'form-control' class to the button element (which, I feel, I shouldn't have to), but then the button corners become square:

[bassjobsen]

hi @Leonivek thanks for posting your issue. I can not confirm your issue in FF. Which browser do you use? Also see issues like: https://github.com/twbs/bootstrap/issues/18083

[ghost]

This is in Chrome, Edge, Opera, Vivaldi, and IE11. Funny thing is, I didn't verify my recent changes in Firefox. So I just checked and it's worse with the form-control class on the button in FF:

However, removing the class makes it look perfect in Firefox, as shown below, but then I have the alignment issue on all other browsers.

So in short, it only looks like it should in Firefox.

[ghost]

Corrected my previous comment to say that it is an alignment issue on all other browsers, not square buttons.

[ghost]

Sigh... my apologies. Ignore my last 2 comments. I made a mistake. Let me try this again. Without the form-control class on the button, the alignment issue only exists in Chrome, Vivaldi, and Opera. All other browsers render it fine.

[ghost]

Inspecting it further, this is what it is like when rendered properly:

While in Chrome and the other browsers, it is:

[bassjobsen]

To be sure, the following code, without typeahead, does not have this issue:

<div class="form-group">
     <div class="input-group">
        <input type="text" id="TextboxTeamName" class="typeahead form-control" autocomplete="off" />
        <span class="input-group-btn">
            <button id="teamsearchbtn" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
        </span>
    </div>
</div>

[ghost]

Thanks for the followup. I wanted to add to this a couple hours ago but was stuck in a Scrum meeting for 2 hours. I realized just before my meeting that the issue is NOT with Typeahead, because I did just that: used the button addon without Typeahead and the issue still exists, only in Chrome, Opera, and Vivaldi. I had wrongly assumed this because the only time we are actually using a button addon at the moment is with Typeahead. Others are just input addons, which work fine.

Sorry for the hassle, and I will close this. Now to figure out what's really happening.

[ghost]

This ended up being an issue with number precision when compiling the Sass version of Bootstrap. Changing it from the default 5 to 10 in my Gruntfile fixed the issue. https://github.com/twbs/bootstrap-sass/issues/409