Select and Text Input in Same Line Bootstrap

Question

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>

humm I think no more code is needed other than what I posted. What else do you need? Thank you for replying! — Jose Hilton
– Jose Hilton, Commented Nov 5, 2018 at 23:20

Obsidian Age · Accepted Answer · 2018-11-05 23:25:32Z

4

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>

edited Nov 5, 2018 at 23:25

answered Nov 5, 2018 at 23:21

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jose Hilton Over a year ago

Because my goal is to make the input and the select in the second line look like the one above (see picture)

Obsidian Age Over a year ago

My snippet shows the elements sitting next to one another. If they don't do that for you, you have additional code interfering. Neither <select> nor <input> occupy a full line by default, though depending on your framework you may need to float the elements to the left. I've updated my answer to showcase this. If this doesn't work for you, you'll need to add more code to your example, showcasing a minimal, complete, and verifiable example of the problem.

Jose Hilton Over a year ago

Could you please check it?

Jose Hilton Over a year ago

could you please add a screenshot of your elements sitting next to each other?

Sarvesh Patel · Accepted Answer · 2019-07-02 04:17:15Z

  
  
    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>

DL LITE · Accepted Answer · 2023-08-05 21:40:59Z

0

<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>

answered Aug 5, 2023 at 21:40

DL LITE

1

Collectives™ on Stack Overflow

Select and Text Input in Same Line Bootstrap

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related