Amir Amir - 4 months ago 20
CSS Question

Dynamic form elements Bootstrap

I cannot make this form works as expected. I tried to build a form with dynamic fields using the codes from this page, but whenever I press "Add" button on the form, it shows an indent before adding the new row. In order to understand my problem, you may take a look at this link: http://158.69.227.133/test/. As you can see, the "Title" field is aligned with the "Page" field once the page loaded, but when you click on the "Add" button, the whole design becomes crappy.

You may just take a look at my code:



$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();

var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.voca:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);

newEntry.find('input').val('');
controlForm.find('.btn-add:not(:last)')
.removeClass('btn-default').addClass('btn-danger')
.removeClass('btn-add').addClass('btn-remove')
.html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove ');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.voca:first').remove();

e.preventDefault();
return false;
});
});

.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off" method="post">
<div class="row">
<div class="col-md-6">
<input class="form-control" placeholder="Page" name="page" type="text">
</div>
<div class="col-md-3">&nbsp;</div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</br>
</br>
<div class="row">
<div class="voca">
<div class="col-md-4">
<input class="form-control" placeholder="Title" name="title[]" type="text">
</div>
<div class="col-md-4">
<input class="form-control" placeholder="Name" name="field[]" type="text">
</div>
<div class="col-md-2">
<select class="form-control" name="choice[]">
<option>Select</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-add">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add
</button>
</br>
</div>
</div>
</div>

</form>
<br>
</div>
</div>
</div>





How can I get rid of that extra indent from the second line?

Answer

You are missing row classes from your rows. row classes are mandatory for bootsrap grid layout. Wrap your subsequent .voca divs with .row divs just like the first one and they will align nicely.

Changing currentEntry = $(this).parents('.voca:first') into currentEntry = $(this).parents('.row:first') will make sure you duplicate the row elements, solving your problem.