0

I have the following template in my markup.

<template id="unsequenced-template">
    <button type="button" class="btn btn-primary railcar"></button>
</template>

And then I insert it into my DOM something like this.

// Inserts a railcar in the unsequenced list before the specified target
function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

This works, but there is zero spacing between buttons inserted this way. I even tried first appending a space to the $clone but it has no effect. I also tried adding whitespace in the template, but that had no effect either.

Some buttons are added on start. They are one per line, and those show a space between buttons. But how can I show spaces between the buttons inserted using JavaScript?

Pointy
  • 405,095
  • 59
  • 585
  • 614
Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
  • 1
    Why not style them with a `margin-right` or something? – Pointy Apr 13 '23 at 17:46
  • @Pointy: Yes, I will do that if I need to. But the ones added when the page loads don't need that. So I'm just trying to understand why those added with JavaScript do. – Jonathan Wood Apr 13 '23 at 17:47
  • 1
    Well what makes you think that there *should* be spacing? Elements right next to each other do not have implicit spacing. – Pointy Apr 13 '23 at 17:48
  • 2
    Note that if you have elements in the original HTML separated by newlines, the newlines are spaces. – Pointy Apr 13 '23 at 17:48
  • Why `var $clone = $($('#unsequenced-template').html());` instead of https://api.jquery.com/clone/ – Roko C. Buljan Apr 13 '23 at 17:49
  • @Pointy: I don't want them to be right next to each other. – Jonathan Wood Apr 13 '23 at 17:49
  • @RokoC.Buljan: Yeah, maybe that's better. – Jonathan Wood Apr 13 '23 at 17:50
  • 1
    This is something that should be solved with CSS not JavaScript. – gre_gor Apr 13 '23 at 17:51
  • But when you `.insertBefore()` you're putting a new element immediately adjacent to an existing element. There will be no text nodes between them, because why would there be? – Pointy Apr 13 '23 at 17:51
  • @Pointy: As I explained, there is whitespace in the template. Also, I described trying to add whitespace to the clone. – Jonathan Wood Apr 13 '23 at 17:52
  • In HTML you probably have buttons each in its own line, basically making it pseudo-wise: ` – Roko C. Buljan Apr 13 '23 at 17:52
  • @gre_gor: If I add a right margin, then the dynamically added content does not match the static content. The static content has whitespace and the right margin appears to get added in addition to the whitespace. – Jonathan Wood Apr 13 '23 at 18:01
  • @RokoC.Buljan: Yes, I get that. But adding newlines to the template doesn't solve it. And, as explained, adding whitespace to the clone doesn't seem to either. – Jonathan Wood Apr 13 '23 at 18:02
  • Whitespace in the template is probably going to be ignored when you get the `.innerHTML` content (via jQuery `.html()`). – Pointy Apr 13 '23 at 18:37
  • @Pointy: I changed it to `.clone()`, as suggested above, but that seemed the same. – Jonathan Wood Apr 13 '23 at 19:01

1 Answers1

2

Use a flexbox to collapse all the whitespace and then add a gap.

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}


function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

let num = 4;
$("#add-btn").on("click", function(e) {
  addSequenced({
    id: num,
    number: num,
  }, $(this));
  num++;
});
#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<template id="unsequenced-template">
    <button type="button" class="btn btn-primary railcar"></button>
</template>
<div id="btn-container">
  <button type="button" class="btn btn-primary railcar">1</button>
  <button type="button" class="btn btn-primary railcar">2</button>
  <button type="button" class="btn btn-primary railcar">3</button>
  <button id="add-btn" type="button" class="btn btn-secondary">Add</button>
</div>
gre_gor
  • 6,669
  • 9
  • 47
  • 52