Search code examples
twitter-bootstrap-3jquery-select2

Horizontal scoll show after click on select2

I'm using select2 and bootstrap 3 to create a form. I have an issue when I click on the select2 to select an item the horizontal scroll bar expands to the right. How can I resolve this?

enter image description here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />


	<form id="second_form" method="post" action="" class="form-horizontal">
	<h1>ALMACEN GENERAL</h1>
	<div class="form-group">
	<label  class="control-label col-sm-3" for="nombre"> nombre</label>
	<div class="col-sm-5">
	<input  type="text" class="form-control" id="nombre" name="nombre"   >
	</div>
	</div>

	<div class="form-group">
	<label  class="control-label col-sm-3" for="tipo"> Tipo</label>
	<div class="col-sm-5">
	<select class="form-control select2"  name="tipo" id="tipo"  >
	<option value=""></option>
	<option>1dfgdfgdfgdfgdfgdgfdg</option>
	<option>2</option>
	</select>
	</div>
	</div>
	<div class="form-group">
	<label  class="control-label col-sm-3" for="cantitad"> Cantidad</label>
	<div class="col-sm-5">
	<input  type="text" class="form-control" id="cantitad" name="cantitad"   >
	</div>
	</div>

	<div class="col-md-5 col-md-offset-3">
	<input type="submit" value="GUARDAR" class="btn btn-primary btn-sm" />
	</div>
	</form>

Solution

  • Add a div with class="container-fluid" and place your code inside it

    <!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container-fluid">
    <form id="second_form" method="post" action="" class="form-horizontal">
      <h1>ALMACEN GENERAL</h1>
      <div class="form-group">
        <label class="control-label col-sm-3" for="nombre"> nombre</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" id="nombre" name="nombre">
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-sm-3" for="tipo"> Tipo</label>
        <div class="col-sm-5">
          <select class="form-control select2" name="tipo" id="tipo">
            <option value=""></option>
            <option>1dfgdfgdfgdfgdfgdgfdg</option>
            <option>2</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-3" for="cantitad"> Cantidad</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" id="cantitad" name="cantitad">
        </div>
      </div>

      <div class="col-md-5 col-md-offset-3">
        <input type="submit" value="GUARDAR" class="btn btn-primary btn-sm" />
      </div>
    </form>
  </div>
</body>

</html>

    here is the screenshotoutput