Blaze: Add table-cell DIV's

help
1

I want to display some numbers in one row, so I was using something like that:

<div class="table">
  <div class="row">
    {{#each cells}}
    <div class="cell">{{value}}</div>
    {{/each}}
  </div>
</div>

and

.table { display: table };
.row {display: table-row};
.cell {display: table-cell; background: red;};

The display is correct if I am using a static HTML page. But as soon as I add the {{#each}} loop, the table is not displayed correctly anymore, although the resulting HTML in the browser inspector looks exactly the same. No CSS class is affecting them. If I mix static HTML with the dynamic loop, only the static cells are displayed correctly, the dynamic cells are incorrect. This happens in both Firefox and Chrome.

Is there a limitation on using DOM manipulation with table cells?

EDIT: The same happens if I switch everything to traditional

, ,
tags.
2

Your code is working correctly for me. I added reactive cell content and it still works as expected - do you have a meteorpad for this?

3

Did you try to add some CSS to the table cells, e.g. color their background? The cells appear, but are lacking all styles. Should have been a bit more precise on that. Edited the code above.

4

Yep - all working fine.

However, I did notice your CSS was formatted incorrectly above - which I “auto fixed” when I copied it.
Now I’ve restored the errors (; after }) it behaves as you describe.

5

Strange, these ; were not included in the original code.

6

I played around with my code, and all of the sudden it works now. Strange. I am absolutely convinced it looks just the same as before now. Anyway, thanks for answering.

1 Like