CODEWITHSUNDEEP
htmltwitter-bootstrap
Jose Hilton
Jose Hilton

Reputation: 11

Select and Text Input in Same Line Bootstrap

Visual Aid

My plan is to place both the select and the input as an input group. In conclusion, I want the second form-group to look as the first one. This is my code.

  <div class="row">
    <div class="col-lg-5 col-xs-12">
      <div class="box box-success">
        <div class="box-header with-border">
          <div class="box-body">
            <form role="form" method="post">
              <div class="box">
                <div class="form-group">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i>
                       Vendedor
                     </span>
                    <input type="text" class="form-control" name="nuevoVendedor" id="nuevoVendedor" value="oparedez" readonly>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group" style="float:left;">
                      <select class="form-control" name="">
                        <option value="Factura No.">Factura No.</option>
                        <option value="Factura No.">Nota No.</option>
                      </select>
                      <input type="text" class="form-control" name="nuevaFactura" id="nuevaFactura" value="1-928361" readonly>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

Upvotes: 1

Views: 11418

Answers (3)

DL LITE
DL LITE

Reputation: 1

<div class="form-group">
  <div class="input-group">
    <select class="form-control" name="">
      <option value="Factura No.">Factura No.</option>
      <option value="Factura No.">Nota No.</option>
    </select>
    <input type="text" class="form-control" name="nuevaFactura" id="nuevaFactura" value="1-928361" readonly>
  </div>
</div>

Upvotes: 0

Sarvesh Patel
Sarvesh Patel

Reputation: 133


  
  
    Dropdown
    
      Action
      Another action
      Something else here
      
      Separated link
    
  


$(document).ready(function(e){
    $( document ).on( 'click', '.bs-dropdown-to-select-group .dropdown-menu li', function( event ) {
    	var $target = $( event.currentTarget );
		$target.closest('.bs-dropdown-to-select-group')
			.find('[data-bind="bs-drp-sel-value"]').val($target.attr('data-value'))
			.end()
			.children('.dropdown-toggle').dropdown('toggle');
		$target.closest('.bs-dropdown-to-select-group')
    		.find('[data-bind="bs-drp-sel-label"]').text($target.context.textContent);
		return false;
	});
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<br/>
<div class="container">
    <div class="row">
        <div class="form-group">
            <label for="inpuFname">Text input with dropdown select</label>
            <div class="input-group">
                <input type="text" value="" class="form-control" name="text">
                <div class="input-group-btn bs-dropdown-to-select-group">
                    <button type="button" class="btn btn-default dropdown-toggle as-is bs-dropdown-to-select" data-toggle="dropdown">
                        <span data-bind="bs-drp-sel-label">Select...</span>
                        <input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value="">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="">
                        <li data-value="1"><a href="#">One</a></li>
                        <li data-value="2"><a href="#">Two</a></li>
                        <li data-value="3"><a href="#">Three</a></li>
                    </ul>
                </div>
            </div>
        </div>
        Check the hidden field for values!
    </div>
</div>

$(document).ready(function(e){
    $( document ).on( 'click', '.bs-dropdown-to-select-group .dropdown-menu li', function( event ) {
    	var $target = $( event.currentTarget );
		$target.closest('.bs-dropdown-to-select-group')
			.find('[data-bind="bs-drp-sel-value"]').val($target.attr('data-value'))
			.end()
			.children('.dropdown-toggle').dropdown('toggle');
		$target.closest('.bs-dropdown-to-select-group')
    		.find('[data-bind="bs-drp-sel-label"]').text($target.context.textContent);
		return false;
	});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<!-- Based on: http://bootsnipp.com/snippets/featured/multiple-control-input-group -->
<br/>
<div class="container">
    <div class="row">
        <div class="form-group">
            <label for="inpuFname">Text input with dropdown select</label>
            <div class="input-group">
                <input type="text" value="" class="form-control" name="text">
                <div class="input-group-btn bs-dropdown-to-select-group">
                    <button type="button" class="btn btn-default dropdown-toggle as-is bs-dropdown-to-select" data-toggle="dropdown">
                        <span data-bind="bs-drp-sel-label">Select...</span>
                        <input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value="">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="">
                        <li data-value="1"><a href="#">One</a></li>
                        <li data-value="2"><a href="#">Two</a></li>
                        <li data-value="3"><a href="#">Three</a></li>
                    </ul>
                </div>
            </div>
        </div>
        Check the hidden field for values!
    </div>
</div>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42354

Why not simply bring the <input> into the same .input-group as the <select>:

<div class="form-group">
  <div class="input-group">
    <select class="form-control" name="">
      <option value="Factura No.">Factura No.</option>
      <option value="Factura No.">Nota No.</option>
    </select>
    <input type="text" class="form-control" name="nuevaFactura" id="nuevaFactura" value="1-928361" readonly>
  </div>
</div>

While not needed by default, you may also need to float the elements to the left:

.input-group > select,
.input-group > input {
  float: left;
}
<div class="form-group">
  <div class="input-group">
    <select class="form-control" name="">
      <option value="Factura No.">Factura No.</option>
      <option value="Factura No.">Nota No.</option>
    </select>
    <input type="text" class="form-control" name="nuevaFactura" id="nuevaFactura" value="1-928361" readonly>
  </div>
</div>

Upvotes: 4

Related Questions