通过jquery定位创建的元素

I have a dropdown and with that an add input box button which on pressed replicates the dropdown.But when it replicates its position gets changed however I want the position also in similar pattern below is the code and I am using a template so dont have much information about CSS

我有一个下拉列表,并且有一个添加输入框按钮,按下时复制下拉列表。但是当它复制时它的位置会改变但是我想在下面的类似模式中的位置是代码而我使用模板所以没有太多有关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 ID Proof dropdown is not aligned correctly when I click add input button

下面是图像,因为您可以看到当我单击添加输入按钮时,ID Proof下拉列表未正确对齐

1 个解决方案

#1

Without much information, what I can suggest is to put your #inputList element outside the .form-group div.

没有太多信息,我可以建议将#inputList元素放在.form-group div之外。

Html code should look like this:

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">
        <input type="button" value="Add Input field" id="addInputs" />
    </div>
</div>

<div id="inputList"></div> <!-- Container for the new appended Form group -->

Reason is that you were appending those form-group inside the col-md-3 element with a form-group parent. Since you have styles set for those form-group, padding for example, it will likely affect the position of the appended elements.

原因是您使用表单组父级将这些表单组附加到col-md-3元素中。由于您为那些表格组,填充设置了样式,例如,它可能会影响附加元素的位置。