Positioning the generated jquery element
I have a dropdown and with this an input input button is entered which, when clicked, replicates the dropdown. But when it replicates its position, it changes, however I want the position to be similar to the template below as well, this is the code and I am using the template so don't have a lot of information about CSS
CSS
.collapsing .navbar-form .form-group,
.collapse.in .navbar-form .form-group {
margin-bottom: 0;
}
.form-bordered .form-group {
margin: 0;
border: none;
padding: 15px;
border-bottom: 1px dashed #eaedf1;
}
.form-bordered .form-group.form-actions {
background-color: #f9fafc;
border-bottom: none;
}
.form-horizontal.form-bordered .form-group {
padding-left: 0;
padding-right: 0;
}
.form-bordered .form-group {
padding-left: 20px;
padding-right: 20px;
}
.form-horizontal.form-bordered .form-group {
padding-left: 5px;
padding-right: 5px;
}
Html
<div class="form-group">
<label class="col-md-3 control-label" for="val_skill">ID Proof</label>
<div class="col-md-3">
<select id="val_skill" name="ID_Proof[]" class="form-control">
<option value="">Please select</option>
<option value="Pan Card">Pan Card</option>
<option value="Passport">Passport</option>
<option value="Voter ID Card">Voter ID Card</option>
<option value="Driving License">Driving License</option>
<option value="Defence ID">Defence ID</option>
<option value="Employee ID Card(issued by govt.)">Employee ID Card(issued by govt.)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-3">
<div id="inputList"></div>
<input type="button" value="Add Input field" id="addInputs" />
</div>
</div>
SCRIPT
<script>$('#addInputs').click(function () {
var zzz = '<div class="form-group"><label class="col-md-0 control-label" for="val_skill">ID Proof</label><div class="col-md-12"><select id="val_skill" name="ID_Proof[]" class="form-control"><option value="">Please select</option><option value="Pan Card">Pan Card</option><option value="Passport">Passport</option><option value="Voter ID Card">Voter ID Card</option><option value="Driving License">Driving License</option><option value="Defence ID">Defence ID</option><option value="Employee ID Card(issued by govt.)">Employee ID Card(issued by govt.)</option></select></div></div>';
$('#inputList').append(zzz);
});</script>
Below is the image as you can see the ID Proof dropdown is not correctly aligned when the enter button is pressed
source to share
Without much information, I can suggest placing your element #inputList
outside the .form-group
div.
The HTML code should look like this:
<div class="form-group">
<label class="col-md-3 control-label" for="val_skill">ID Proof</label>
<div class="col-md-3">
<select id="val_skill" name="ID_Proof[]" class="form-control">
<option value="">Please select</option>
<option value="Pan Card">Pan Card</option>
<option value="Passport">Passport</option>
<option value="Voter ID Card">Voter ID Card</option>
<option value="Driving License">Driving License</option>
<option value="Defence ID">Defence ID</option>
<option value="Employee ID Card(issued by govt.)">Employee ID Card(issued by govt.)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-3">
<input type="button" value="Add Input field" id="addInputs" />
</div>
</div>
<div id="inputList"></div> <!-- Container for the new appended Form group -->
The reason is that you were adding those form-group
inside the col-md-3
parent element form-group
. Since you have styles set for these form-group
, such as padding, this will most likely affect the position of the added elements.
source to share