select width inside an input-group with 4 elements

[giro83]

Hi,

Warning: this may not be a bug with bootstrap-select, in which case, feel free to close this, and I apologize in advance.

Currently, I have an input-group with 4 elements: two spans of type input-group-addon and two text inputs.
I would like to replace one of the text inputs with a select (bootstrap-select).

As you can see from the JSFiddle below, in my current setup the two text inputs both have width set to 100%, and so end up having the same final width. It all looks pretty tidy.
I would like to have that input-group behave the same way with the select in place of one of the text inputs (regardless of the elements I'll put in the select as options, I know they will all fit).

However, as you can see from the same JSFiddle, the size of the select element is not the same as the size of remaining text input.
Please note I have tried all possible data-width options, I'm just showing one of them in the JSFiddle.

Is this a bug? In the sense, should the bootstrap-select element behave like the text input I replaced and automatically assume the same size of the remaining text input (at least do this with one of the available data-with options)?

If the answer is no, any idea how to achieve my goal? I tried statically setting the select element to a certain px width, but it actually ends up rendering wider than the surviving text input.

Thanks a lot!

PS: Ignore the round corners for the select element, that's #1451 fixed in the latest master.

https://jsfiddle.net/4fbb1w03/

[caseyjhol]

Looks like the problem is a typo. You've got the class from-control on your select, instead of form-control. Changing it to form-control and removing the data-width attribute gives you your desired result.

[giro83]

Thanks for catching the typo, my bad.

Still, I fixed it, and the select is still not the same size as the text input (and I have re-tested all data-width options available).

See: https://jsfiddle.net/4fbb1w03/2/

Thanks

[giro83]

Ping? :)

[caseyjhol]

This issue doesn't appear to be caused by bootstrap-select. See this example using standard select elements: https://jsfiddle.net/4fbb1w03/5/. Using 2 select elements instead of 1 select and 1 input causes the widths to even out. I'm not sure what's causing this inconsistency. Maybe try asking on StackOverflow or on the Bootstrap issue tracker?

[giro83]

Question asked on StackOverflow (just in case anyone is following or finds this thread...)

http://stackoverflow.com/questions/39310537/unexpected-size-of-select-element-inside-a-particular-bootstrap-input-group