Aurelia repeater renders different from same hard coded content

Question

I'm trying to work with an example of a css grid. But when I use it with Aurelia repeater it renders odd in the browser. I tried to isolate everything into only simple styles but still the same problem. First it is the repeater and then I have hard coded the exact result of the repeater below. Notice that it doesn't matter which order you place them.

Tried to create an example over here: https://gist.run/?id=0dbb9921dd8997e0ddbbeeba8bca9dd6

The only thing you need to put in your app.js is:

export class App {
  constructor() {
    this.styleString = "width:25%;display:inline-block;min-height:1px;vertical-align:top;padding-left:20px;margin-right:-.25em;box-sizing:border-box;";
  }
}

And in you app.html:

<template>
  <div>
    <div repeat.for="i of 4" style="background:${i%2==0?'red':'green'};${styleString}">
      ${i}
    </div>
  </div>
  <div>
    <div style="background:red;${styleString}">
      0
    </div>
    <div style="background:green;${styleString}">
      1
    </div>
    <div style="background:red;${styleString}">
      2
    </div>
    <div style="background:green;${styleString}">
      3
    </div>
  </div>
</template>

Can anyone clarify what I'm doing wrong?

EDIT

Sorry. The odd behavior is that in my browser the width of the four columns is not as wide as the four columns I have hard coded. It is not full length.

I am able to reproduce the error if I copy the OUTER HTML of the outer div in developer tools and paste it into my app.html. But if I format that correctly in terms of indentation and correct line breaks it renders what in my opinions is correctly.

EXPLANATION

As Fabio points out in his comment it is the white space that is the difference. The css grid I'm evaluating is taking this into account and adds this style margin-right:-.25em; because it is expecting you to have white spaces between your divs. You can actually read about that in the link provided by Andrew.

The simplest solution might be to just add a class if I generate these grid columns with Aurelia repeater that overrides the margin-right and set it to zero.

The four columns is not as wide as when I declare the same html without the repeater. — John, Aug 24 '16 at 14:05
This isn't part of your problem, but you should switch from using `style` to using `css`. Internet Explorer and Edge don't allow invalid CSS in the style attribute, and they remove it before JavaScript code can see it, so your app won't work properly in IE or Edge. Switch to using the `css` custom attribute (which works exactly like `style` except that it works in IE/Edge) and you'll be good on this front. — Ashley Grant, Aug 24 '16 at 14:41
If you remove the white-spaces from the markup you will have the same result in both ways. https://gist.run/?id=30646b3ab7b380c1ad16b58f50e442d3. Aurelia repeater is doing the right way — Fabio, Aug 24 '16 at 17:21
Thanks @AshleyGrant for pointing out that I should use css instead of style but this was only for the example and to make sure I didn't do any typos in my styles. Normally I go with classes and then I guess you could opt for either `style` or `css`. — John, Aug 25 '16 at 06:04
@John, do you still need help with this problem? Does the answer provided give you what you need, or do you still need more help? — Andrew, Oct 04 '16 at 14:14

score 1 · Answer 1 · edited May 23 '17 at 12:19

You have an interesting problem indeed :)
Your issue lies in how having div's with inline-block attributes causes an 'unexplained' gap. More details about that can be found here (Why is there an unexplainable gap between these inline-block div elements?).
This is definitely an interesting situation, and might be worth reporting at the aurelia templating repo (https://github.com/aurelia/templating) so that they can get their repeat.for binding to behave exactly like the browser.

To answer your question specifically, you have two options (also, you're not "doing anything wrong", don't worry).
1. You can add a class to the <div>'s that are using the repeat.for syntax to add the small pixel gap, making it similar to how the browser behaves.
2. You can remove the pixel gap on the regular browser <div>'s as explained in the previously linked Stack Overflow post.
3. As per this comment, you can also just remove the whitespace and it should work fine in both situations.

Hope this helps.

Aurelia repeater renders different from same hard coded content

1 Answers1