twitter bootstrap input-group-addon and btn-group not aligning nicely

Question

I have a select item that I've applied the selectpicker function on from
http://silviomoreto.github.io/bootstrap-select/
now I'm trying to align the input-group-addon with the select, which turned into a btn-group, however the addon's height is never the same as the btn-group's height, I'm using twitter bootstrap 3.
Anyone who can advice me on how to do this, my code is:

<div class="input-group">
    <span id="contact_servicecode" class="input-group-addon ng-binding">CONTACT_SERVICECODE</span>
    <div class="btn-group bootstrap-select">
        <button class="btn dropdown-toggle btn-custom" data-toggle="dropdown" type="button">
            <div class="filter-option pull-left">1</div>
            <div class="caret"></div>
        </button>
        <div class="dropdown-menu open">
            <ul class="dropdown-menu inner" role="menu">
        </div>
        <select class="selectpicker mobile-device" style="display: none;">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
</div>

Answer 1

Here is my jsbin for how I fixed it. jsbin

When you set the input-group sizes either 'input-group-lg' or 'input-group-sm' it will give you predefined sizes - most notably a height of 46px or 30px for the inputs respectively. However nothing happens if you accept the regular size. I think this is so you aren't surprised if you have settings for inputs outside of Bootstrap.

Here are example measurements for lg

.input-group-lg > .input-group-btn > .btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

Instead of tweaking lg after the fact, I created a class called 'input-group-reg' uses measurements that are a middle ground between the 'lg' and 'sm' given by bootstrap.

.input-group-reg > .form-control {
    height: 38px;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.44;
    border-radius: 6px;  
}

/* Sizing the input */
.default-input-group-lg > form-control {
    height: 38px;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.44;
    border-radius: 6px;  
}

/* Sizing the button */
.input-group-reg > .input-group-btn > .btn, .input-group-reg > .input-group-btn:last-child > .dropdown-toggle{
    height: 38px;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.44;
    border-radius: 6px;
}

Answer 2

It sounds like you're running into a known issue with Bootstrap when it's compiled with some SASS compilers. See https://github.com/twbs/bootstrap-sass/issues/409.

If you're using bootstrap-sass, that's that's causing it. You have to set the SASS precision to 10 before compiling Bootstrap. How you set it depends on what your particular set up is (Gulp, Grunt, Laravel Elixir, etc.).