Bootstrap: <select> inside .input-group-addon

[svennd]

When adding a selectbox to input-group-addon the increased padding (?) from alpha 3 breaks the size :

note: the first one is default "out of the box" the second one I "applied" padding-top: 6px; padding-bottom: 6px; to input-group-addon

<div class="form-group row">
          <label for="inputPassword" class="col-sm-2 form-control-label">Temperature</label>
          <div class="col-sm-6">
            <div class="input-group">
              <input type="text" name="temp" class="form-control" aria-label="temperature">
              <span class="input-group-addon">
              <select name="unit_temp">
                  <option value="C"> &deg;C</option>
                  <option value="F"> &deg;F</option>
                  <option value="K"> K</option>
                </select></span>
            </div>
          </div>
        </div>

I tried adding form-control to the select, but that does not seem to be intended :

The issue seems to be that padding is 8px; within the input-group-addon, before it was 6px; ?

Tested on Chromebook :
Versie 53.0.2785.55 beta (64-bit)
Platform 8530.49.0 (Official Build) beta-channel leon
Firmware Google_Leon.4389.61.46

Great work guys, keep up ! Thanks for the framework!

[cvrebert]

<select>s probably aren't sufficiently styleable in CSS to make such a thing work nicely.
You might consider using a dropdown instead: http://v4-alpha.getbootstrap.com/components/input-group/#buttons-with-dropdowns

CC: @mdo for a decision on this feature request.

[cristian-sima]

@cvrebert I can not use dropdown, because of many reasons:

1. <select> is a component of a HTML form
2. can not search options inside dropdown, by typing
3. lose all other functionality of select

[cristian-sima]

Same here:

Code:

<div class="input-group">
  <select class="custom-select form-control">
    <option value=""></option>
  </select>
  <div class="input-group-btn">
    <button
    type="button"
    class="btn btn-success"
    >
    <i className="fa fa-plus" />
  </button>
</div>
</div>

[mdo]

Punting given how problematic this will be across browsers. Even our custom selects aren't 100% styled in every browser and OS. Getting them to match up with the input groups just leaves you with rather gnarly looking components in a lot of environments.

[cristian-sima]

Wait a bit.

You've closed it, but it is still a big bug.

We do not have to customize the select for every browser in the world. It may be worth to focus on modern versions of browsers.

[svennd]

I'm also disappointed, but it was never in the documentation, so I guess its not a "feature" they are willing to implement.

Try to hack it in like I did, I tried it on the latest Chrome & Firefox, and it seemed oké with the decreased padding. Life is easier when you can ignore old browsers...

[cristian-sima]

@svennd That's what I said about old browsers.

We should produce for nearly new ones. I still maintain my proposal as I feel is not too difficult to include a general hack for the select

[mdo]

Adding support for the select _next_ to the addon is probably doable as some folks have shown, but that's not what this issue is asking for. This wants the select in the addon.

[cristian-sima]

Hmm. Yes. I've now seen it. Should I start a new issue regarding this?

[plaurent75]

<select class="w25 input-group-addon custom-select border-left-0 rounded-0">
                <option name="all" value="" selected>dddd</option>
</select>

[PabloRSA]

Work around BS 4.10

<div class="input-group-prepend">
    <span class="input-group-text">
        <select class=" bg-transparent border-0" id="inputGroupSelect01">
            <option selected>Choose...</option>
            <option value="1">One</option>
        </select>
     </span>
  </div>