Bootstrap use select as input add-on

Viewed 2393

I'm trying to replace the input-group-addon with a select input but it's giving me positioning issues. I'm able to click the dropdown and select the options but the width is all wrong. I'll post an image below of what it looks like.

I want the select to be right next to the input because the user will be able to input a size in either mm or in.

enter image description here

My code is as follows:

<div class="form-group">
    <label for="wrapped">Wrapped Around</label>
    <div class="input-group">
        <input type="number" class="form-control" id="wrapped" placeholder="Wrapped Around" name="wrapped" step="0.01">
        <div class="input-group-addon">
            <select class="form-control">
                <option selected>Pick</option>
                <option>mm</option>
                <option>in</option>
            </select>
        </div>
    </div>
</div>

Any help would be great, thanks!

1 Answers
Related