Removing space between two html elements: textbox and glyphicon
Question
I want to dynmaically add rows in an html form. However, I have small issue: My form is:
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id = "mydiv" class="controls multi-field-wrapper row">
<div class="multi-fields">
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
</div>
<a href="#" class="col-md-1 col-lg-1" style='margin: 0; padding: 0; border: 0; float: left;'>
<span class="add-field glyphicon glyphicon-plus-sign"></span>
</a>
</div>
</body>
</html>
and my jquery script is
jQuery(document).ready(function() {
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';
$(".add-field", $(this)).on('click', function(e) {
e.preventDefault();
$('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
e.preventDefault();
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
});
However the problem is that the plus glyphicon is far from textbox while minus glyphicon is nearer which is what is required, as in the image. How can I also move the plus glyphicon in similar distance to the minus glyphicon from the textbox.
This should be extremely but I am a newbee in the area, could you identify the problem and suggest the solution. Thanks!
5 answers
solution1
2 ACCPTED 2016-05-27 09:43:43
Demo : https://jsfiddle.net/gurn5zh9/
First put your a tag that add new field into your main div
<div id = "mydiv" class="controls multi-field-wrapper row">
<div class="multi-fields">
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
<a href="#" class="col-md-1 col-lg-1 addField" style='padding-left:20px'>
<span class="add-field glyphicon glyphicon-plus-sign"></span>
</a>
</div>
</div>
</div>
then in your script remove it from the clone :
jQuery(document).ready(function() {
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';
$(".add-field", $(this)).on('click', function(e) {
e.preventDefault();
$ccc = $('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper);
$ccc.find('.addField').remove();
$ccc.find('input').val('').focus();
});
$('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
e.preventDefault();
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
});
solution2
1 2016-05-27 09:43:02
there is not any problem in your jQuery code. but problem is in your HTML Code. here
you are not closing html tags properly
properly use your classes in HTML and as well as in js file where you creating your HTML element dynamically & using same css style for both if you want same functionality.
don't change your script & try this
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id = "mydiv" class="controls multi-field-wrapper row">
<div class="multi-fields">
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
<a href="#" style="padding-left:20px;" class="add-field">
<span class="glyphicon glyphicon-plus-sign"></span>
</a>
</div>
</div>
</div>
</body>
</html>
Output will be
solution3
0 2016-05-27 09:24:57
The fact is, your "a" tag for the "plusicon" is out of div "multi-fields". When you create a new row, you append "minusicon" in the "multi-fields" div. That's why it's not the same position between both.
Bad things which can fix it :
<a href="#" class="col-md-1 col-lg-1" style='margin: 0; padding: 0; border: 0; float: left; margin-left: -88px;'>
I'm looking for a better way using jquery, update when i found it.
UPDATE :
First, put your a tag of plusicon into multi-field div
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
<a href="#" class="col-md-1 col-lg-1" style='mpadding-left:20px '>
<span class="add-field glyphicon glyphicon-plus-sign"></span>
</a>
</div>
Then, when you want to clone it, remove from the clone the a tag.
$(".add-field", $(this)).on('click', function(e) {
e.preventDefault();
var newclone = $('.multi-field:first-child', $wrapper).clone(true);
newclone.find("a").remove();
newclone.append(remove).appendTo($wrapper).find('input').val('').focus();
});
solution4
0 2016-05-27 09:29:38
提示：您忘记关闭<div class="multi-fields"> :)
solution5
0 2016-05-27 09:31:21
try this :
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-6 col-lg-6 " >
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.