select2 and input-prepend

[jssebastian]

When placing a select2 next to a bootstrap input-prepend addon, the select2 is not styled properly. It needs:

• no rounded corners on the left side (right side for input-append)
• same height and padding as the add-on

For this, with default bootstrap variables I am using this css:

.input-prepend .select2-container .select2-choice{
    font-size:14px;
    line-height:20px;
    height:20px;
    padding-top:4px;
    padding-bottom:4px;
}

.input-prepend .select2-container .select2-choice{
    border-radius: 0 4px 4px 0;
}

In terms of bootstrap variables, the 14px and 20px are clearly @baseFontSize and @baseLineHeight.. not sure what the 4px padding I found by trial and error should be defined as...

[michaek]

I agree this is important. I've got similar styles in the project in which I'm using this library - I'll see about moving them upstream to address this.

[nickl-]

@jssebastian Please submit the changes in a PR so that we can get it into release.

I assume this will also require something on the bootstrap3 branch, please advise.

[fk]

@nickl- In the bootstrap3 branch this is taken care of ("Input Groups"), albeit sloppy: Currently an additional CSS-class needs to be added to Bootstrap 3s .input-group container to adjust the Select2 border-radii – revisiting this I wonder why I didn't use just CSS selectors instead.