CODEWITHSUNDEEP
javascripthtmlcssstringpadding
ajrlewis
ajrlewis

Reputation: 3058

Padding based on size of string?

I'm trying to dynamically insert some list into an element called foos. I want to manually number this list (e.g. <span>${i + 1}. </span> for i in the list element number) but I want the distance between this number and the element to align nicely. By nicely I mean:

 8. foo
 9. foo
10. foo
11. foo

rather than what is displayed in the snippet, i.e.

8. foo
9. foo
10. foo
11. foo

Thanks for any help here!

let people = ['foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  var person = people[i];
  htmlString += `<span>${i + 1}. </span><span>${person}</span><br>`;
}
$('#foos').html(htmlString);
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

Upvotes: 7

Views: 2429

Answers (6)

ajobi
ajobi

Reputation: 3116

Something like this would be possible using CSS:

let people = ['foosa', 'foo', 'foofsafa', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foofsafasf', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  var person = people[i];
  htmlString += `
      <div class="item-wrapper">
 	  <span>${i + 1}. </span>
          <span>${person}</span>
      </div>`;
}
$('#foos').html(htmlString);
.item-wrapper {
  display: table-row;
}

.item-wrapper span {
  display: table-cell;
}

.item-wrapper span:first-child {
  text-align: right;
  padding-right: 5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

Edit inspired by the @Temani Afif's solution.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272817

You can rely on some CSS and counter to easily achieve this:

let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);
#foos {
  counter-reset:num;
}
#foos span {
  display:block;
  margin-left:20px; /*adjust this*/
  position:relative;
}
#foos span:before {
  content:counter(num)'.';
  counter-increment:num;
  position:absolute;
  right:100%;
  margin-right:3px; /*adjust this*/
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

If the number can increase a lot you can try the following where the width of the number area will adjust based on the maximum number:

let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);
#foos {
  counter-reset:num;
}
#foos span {
  display:table-row;
}
#foos span:before {
  content:counter(num)'.';
  counter-increment:num;
  display:table-cell;
  text-align:right;
  padding-right:5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

Upvotes: 6

blaze_125
blaze_125

Reputation: 2317

Find out how much you need to pad by finding out the length of your array, then the length of the length of your array... then use the padding function.

var blah = ["foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo"];
var textToAppend = ". ";
var padTo = (blah.length + textToAppend).length;
for(var i = 0; i<blah.length;i++)
  {
    padded = ((i+1) + textToAppend).padStart(padTo);
    console.log(padded + blah[i]);
  }

and get this out

 1. foo
 2. foo
 3. foo
 4. foo
 5. foo
 6. foo
 7. foo
 8. foo
 9. foo
10. foo
11. foo
12. foo
13. foo
14. foo
15. foo
16. foo
17. foo

Upvotes: 0

Chinedum Ukejianya
Chinedum Ukejianya

Reputation: 1246

Maybe something like this.

let people = ['foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
let max_string_size = (people.length + "").length;  
let htmlString = people.map((person, idx) => {
  let idx_str = (idx + 1 + "").padStart(max_string_size).replace(/\s/g, '&nbsp;&nbsp;');
  return `<span>${idx_str}. </span><span>${person}</span><br>`;
}).join("")
$('#foos').html(htmlString);

Upvotes: 0

Gr&#233;gory C
Gr&#233;gory C

Reputation: 429

I think use the following tag <pre></pre> would help. <pre> tag keeps white spaces.

And the use of a monospaced font ensures that white spaces are same width than other characters.

Hope it helps ;-)

Upvotes: 2

Calamaster
Calamaster

Reputation: 35

Why not just add a style to: htmlString += <span>${i + 1}. </span><span>${person}</span><br>;

htmlString += <span style="text-align:right;">${i + 1}. </span><span>${person}</span><br>;

Upvotes: 0

Related Questions