CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Joe Scotto
Joe Scotto

Reputation: 10877

Bootstrap use select as input add-on

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!

Upvotes: 4

Views: 2904

Answers (1)

tao
tao

Reputation: 90068

#wrapped+.input-group-addon {
    margin: 0;
    padding: 0;
    min-width: 8rem;
    border: none;
}
#wrapped+.input-group-addon>.form-control {
    border-radius: 0 .4rem .4rem 0;
    border-left: none;
}

/* CSS below is for centering the div in the page, you only need what is above this line */

body {
    min-height: 100vh;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
body > .form-group {
    width: 50vw;
}
<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
      crossorigin="anonymous"
      />
<div class="form-group">
  <label for="wrapped">Wrapped Around</label>
  <div class="input-group">
    <input id="wrapped" 
           class="form-control" 
           type="number" 
           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>
Screen capture, as per comments:

enter image description here

Does anyone experience the problem Joe mentions in comments: border-radius not being reset on the left side of the select?

Upvotes: 6

Related Questions