input-group-addon on both sides does not work

[vsc55]

If we "input-group-addon" before and after select select stops working. They go round the edges.

Code Example:
<div class="input-group">
<span class="input-group-addon">@</span>
<select class="form-control selectpicker">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<span class="input-group-addon">@</span>
</div>

[giro83]

I can confirm the above.

[caseyjhol]

This is actually an issue with Bootstrap. There's a mistake in the CSS that incorrectly applies border-radius: 0; to the .input-group-btn parent, instead of the button itself. Add:

.input-group-btn:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

[vsc55]

OK, Fixed.
Thank you very much.

[vsc55]

Besides adding "border-radius" also add height:

.input-group-btn:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
  height: 100%;
}

[caseyjhol]

In what scenario is height: 100% needed?

[vsc55]

Not mandatory, but highly recommended if.
I've had problems since the span of the sides were higher than normal and the select is not occupied the entire area.
Thus no matter the height of the side span is set as 100%.

Without height not set to 100% can happen:

[giro83]

If this is a bug in bootstrap, is someone proficient / familiar in reporting bugs to them raising this? Just saying, so we won't have to use a workaround forever.

[caseyjhol]

Well, bug might not have been the best word to use. I considered reporting it, but as far as I can tell, Bootstrap doesn't support having button groups next to input-group-addons (at least not officially). .input-group-btn:not(:first-child):not(:last-child) having a border-radius of 0 is more a result of consolidating the CSS than anything on purpose, I think. In addition, width: 100% would need to be added to the .btn, I'm not sure they'd be cool with that. Maybe I'll submit it, but I will be adding this fix into bootstrap-select officially.

[algopill-nadav]

any solution ?