30

I tried to use Label 2 with bootstrap-select, but it looks different to the bootstrap (Label 1) one. How is it possible to get the two labels in the code below look the same?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Test</title>

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">Labe 1</span>
          <input type="text" class="form-control" name="snpid" placeholder="Test">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">GO!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->  
    <div>    
    <BR/>
    <HR>

  <div class="container">
    <form class="form-inline">
      <div class="form-group">
        <span class="input-group-addon">Label 2</span>
      </div>
      <div class="form-group">
        <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
          <option>Hot Dog, Fries and a Soda</option>
          <option>Burger, Shake and a Smile</option>
          <option>Sugar, Spice and all things nice</option>
          <option>Baby Back Ribs</option>
          <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
      </div>
    </form>
    <div>  

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script>
      $('.selectpicker').selectpicker();
    </script>
  </body>
</html>
1

3 Answers 3

45

From Bootstrap docs:

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.

You need to wrap the select and .input-group-addon in a .input-group:

<div class="input-group">
  <span class="input-group-addon">Label 2</span>
  <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
    <option>Hot Dog, Fries and a Soda</option>
    <option>Burger, Shake and a Smile</option>
    <option>Sugar, Spice and all things nice</option>
    <option>Baby Back Ribs</option>
    <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
  </select>
</div>

Check it out:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">Labe 1</span>
      <input type="text" class="form-control" name="snpid" placeholder="Test">
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit">GO!</button>
      </span>
    </div>
  </div>
  <br>
  <hr>
  <div class="container">
    <form class="form-inline">
      <div class="input-group">
        <span class="input-group-addon">Label 2</span>
        <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
          <option>Hot Dog, Fries and a Soda</option>
          <option>Burger, Shake and a Smile</option>
          <option>Sugar, Spice and all things nice</option>
          <option>Baby Back Ribs</option>
          <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
      </div>
    </form>
  </div>
</div>

2
  • 19
    In my browser the select is rounded, which makes it not to "fit" in the label. Does this happens to you too? Mar 5, 2015 at 7:32
  • 2
    In my browser there is standard select, and the question is about bootstrap-select, add-on to Bootstrap! Jul 29, 2015 at 7:35
19

I've modified caeth's solution with additional CSS to ensure the select button is rounded at their respective corners.

HTML

<form class="form-inline">
    <div class="input-group">
        <span class="input-group-addon">Label</span>
        <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
            <option>Hot Dog, Fries, and a Soda</option>
            <option>Burger, Shake, and a Smile</option>
            <option>Sugar, Spice, and all things nice</option>
            <option>Baby Back Ribs</option>
            <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
    </div>
</form>

CSS

.input-group > .input-group-btn:last-child > .selectpicker {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.input-group > .input-group-btn:first-child > .selectpicker {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

See it here: http://jsfiddle.net/xr4uofje/130/

0

I've just found an easy way to include add-ons with select (no bootstrap-select). This answer might not be strictly related to the bootstrap-select question, but might be helpful for someone landing here looking for this answer (as I did). I just move the select under the add-on, with margin:-4px, and add 4 pixels to the width like this

.input-group select.form-control {
    margin-left: -4px;
    width: calc(100% + 4px);
}

and then I set a relative position and z-index to the add-on, like this:

.input-group .input-group-addon {
    z-index: 5;
    position: relative;
}

I hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.