CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Whip
Whip

Reputation: 2232

Whitespace disappear for dynamically inserted content

I have a simple javascript setup that creates or removes fields depending upon how many the user wants. But when the user clicks the add button to create another field, the space between the fields and elements completely disappears. There's no padding or margin applied on it and even if you do apply a margin, the difference still remains.

Here's the part that's repeated

<div class="tax-cont">
  <input type="text" class="form-control inline-field md" placeholder="Tax Name">
  <div class="input-group inline-group md">
    <input type="text" class="form-control" placeholder="Value">
    <label class="input-group-addon"><i class="fa fa-percent"></i></label>
  </div>
  <a class="addRemove btn btn-success btn-round btn-sm"><i class="fa fa-plus"></i></a>
</div>

And javascript

  // Add or Remove additional departure dates
  var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name"><div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div><a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';

  $('.tax-cont .addRemove.btn-success').on('click', function(){
    var lastTaxbox = $('.tax-cont').last();
    lastTaxbox.after($(taxContent));
  });
  $('.form-group').on('click', '.btn-danger', function(){
    $(this).parent().remove();
  });

Here's how it looks

Screenshot

I can't figure out why this is happening at all. Here's a codepen to demonstrate.

Upvotes: 2

Views: 1513

Answers (2)

Whip
Whip

Reputation: 2232

As pointed by others, the reason there's no space between the inserted set is, there's no space between their code. Thanks to nicholas for sharing the link that explains it well.

To fix the problem, I added white-space in the javascript code (&nbsp;) which produces the same space as the original DOM.

var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name">&nbsp;<div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div>&nbsp;<a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';

Upvotes: 1

Luuuud
Luuuud

Reputation: 4439

This is happening because of the way inline and inline-block elements behave when it comes to whitespace. In your original html source there's a new line between the <input> and <div>. Which is whitespace and which will result in a whitespace between the two elements on your page.

<input type="text" class="form-control inline-field md" placeholder="Tax Name"> <!-- new line -->
<div class="input-group inline-group md"> ... </div>

However, when you use Javascript to add elements to your DOM, there's no whitespace node added. So it will just stick the two together. If you'd remove the new line from your original source, the two inputs will be stuck together as well.

As a solution you could use margin-right on the <input> or margin-left on the following <div> to make sure all rows maintain the same spacing.

Upvotes: 4

Related Questions