F. Flores F. Flores - 5 months ago 15
Javascript Question

Input with wrong size

Hello I'm using bootstrap 3.3.6 and I don't know why this is happen. Basically I am using bootstrap grid system, I have mi first div with col-md-12 and then with jQuery I create 4 divs with class col-md-3 with controls inside but when I resize the window the controls jump to other line and leaves a blank space.

Blank spaces when window its resized



var num = 0;
var lineas = "";
$('#agregar').click(function() {
agregar();
});

function agregar() {
num++;

if (num <= 4) {
if (num == 1) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Quality:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);

lineas = "";
}
if (num == 2) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Manufacture:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);

lineas = "";
}
if (num == 3) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Supp. Produccion:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);

lineas = "";
}
if (num == 4) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Control de Documentos:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);

lineas = "";
}
} else {
$('#agregar').hide();
$('#lbl1').hide();
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12" id="options">
<div class="col-md-4">
<label id="lbl1" class="control-label hidden-print">Add</label>
<span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
</div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>





jsFiddle

Answer

There's a typo in the HTML strings in the JS. You have </label"> instead of </label>.

var num = 0;
var lineas = "";
$('#agregar').click(function() {
  agregar();
});

function agregar() {
  num++;

  if (num <= 4) {
    if (num == 1) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Quality:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 2) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Manufacture:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 3) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Supp. Produccion:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 4) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Control de Documentos:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
  } else {
    $('#agregar').hide();
    $('#lbl1').hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12" id="options">
  <div class="col-md-4">
    <label id="lbl1" class="control-label hidden-print">Add</label>
    <span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
  </div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>