CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Krys
Krys

Reputation: 829

input-group with input field, select (silviomoreto) and button not displaying correctly

I currently have an input-group consisting of an input field, a select menu and a button.

I understand that you have to use a dropdown menu instead of select in bootstrap, but I want to refrain from using the dropdown with javascript.

The select menu I am using is from: https://silviomoreto.github.io/bootstrap-select/examples/ so its not the bootstrap version, however I am using the bootstrap select here for this question.

At the moment the select menu drops below the input field and I am not sure why its doing this, but I want the input-group to sit on one line.

I dont want to give the select a specific width because that wont work, I have tried it and it just creates problems, so I want it to take their default width if it can.

Any ideas?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <form>

    <div class="form-group">
      <h3 id="track-record">Record</h3>
      <div class="col-md-8">
        <div class="input-group select-group">
          <input type="text" class="form-control input-text input-md select-input" id="assessor" placeholder="placeholder here">

          <select id="year-select" class="form-control input-group-addon">
            <option value="">Year</option>
            <option value="1">2014</option>
            <option value="2">2013</option>
            <option value="3">2012</option>
            <option value="4">2011</option>
          </select>


          <span class="input-group-btn">
         <button type="button" class="btn btn-primary btn-sm btn-outline grey-outline"><span class="glyphicon glyphicon-minus"></span>Delete record</button>
          </span>
        </div>
      </div>

    </div>

  </form>
</div>

Upvotes: 0

Views: 1408

Answers (1)

vanburen
vanburen

Reputation: 21663

As far as I can tell you'll have to do this on your own, I don't believe there is any native support in Bootstrap for grouping multiple input fields with a button.

The vast majority of this is defining the border radius of each input based on the viewport since they's placed inside columns (*which also have the padding removed to keep the inputs together).

Here are three examples depending on how you may or may not want to handle this on different devices.

(*Make sure to open the Snippet to Full Page then reduce the Browser to see the changes)

Working Examples:

$('.select-group').selectpicker();
/**CSS BELOW THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/

body {
  padding-top: 20px;
}
.the-form,
.the-form-2,
.the-form-3 {
  padding: 0 15px;
}
/**CSS ABOVE THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/

.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
/**FORM 1**/

@media (min-width: 768px) {
  .the-form .form-control.new-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  .the-form .btn-group.bootstrap-select.form-control.select-group,
  .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-radius: 0;
  }
  .the-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (max-width: 767px) {
  .the-form .btn-group.bootstrap-select.form-control.select-group,
  .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .the-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
/**FORM 2**/

.the-form-2 .form-control.new-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.the-form-2 .btn-group.bootstrap-select.form-control.select-group,
.the-form-2 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
  border-radius: 0;
}
.the-form-2 button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/**FORM 3**/

@media (min-width: 768px) {
  .the-form-3 .form-control.new-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group,
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-radius: 0;
  }
  .the-form-3 button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (max-width: 767px) {
  .the-form-3 .form-control.new-form-control {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
  }
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group,
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 4px;
  }
  .the-form-3 button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
  }
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="container">
  <h1>Example 1</h1>
  <form class="the-form">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-12 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-6 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-6 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span> Delete Record
        </button>
      </div>

    </div>

  </form>
</div>
<hr>
<div class="container">
  <h1>Example 2</h1>
  <form class="the-form-2">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-7 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-3 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-2 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span>  <span class="hidden-xs">Delete Record</span>
        </button>
      </div>

      <span class="help-block text-right visible-xs">Delete Record</span>

    </div>

  </form>
</div>
<hr>
<div class="container">
  <h1>Example 3</h1>
  <form class="the-form-3">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-12 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-6 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-6 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span> Delete Record
        </button>
      </div>

    </div>

  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

Upvotes: 3

Related Questions