3

I'm wondering if there is a solution other than here:

How to remove the space between inline-block elements?

for removing the whitespace when <span> tags are in a <template is="dom-repeat">.

E.g., suppose we have a dom-repeat generating a table column header:

    <th class="asciitable">
      <template is="dom-repeat" items="[[_asciiheader]]">
        <span class="asciinumeral">[[item]]</span>
      </template>
    </th>

And we want the elements to all appear like, say '12345678', instead of what would happen, '1 2 3 4 5 6 7 8'.

The above fits the case of "don't have access to the HTML", because the dom-repeat generates the HTML for us, and so we can't put the <span> tags on the same line, or use the <!--\n--> trick. Note we have to wrap the data-binding in something, a <span> in this case, because Polymer 1.0 requires no spaces before or after data-bindings.

The only thing that seems to work is doing what the link above suggests:

.asciitable {
  padding: 0px;
  border-width: 0px;
  margin: 0px;
  font-size: 0;
}
.asciinumeral, .ascii {
  font-size: 16px;
}

but this seems less than ideal.

Community
  • 1
  • 1
mbunit
  • 463
  • 3
  • 10
  • Are you sure that the data you're fetching have no space at all? And also have you tried eliminating the dom space? like between `template` and `span` – vivekkupadhyay Aug 06 '15 at 04:38
  • You can use `float: left` instead if that's feasible given your project constraints – martypdx Aug 06 '15 at 05:27

1 Answers1

3

How about writing everything on one line?

<template is="dom-repeat" items="[[_asciiheader]]"><span class="asciinumeral">[[item]]</span></template>

This should give you numbers without spaces.

Justin XL
  • 38,763
  • 7
  • 88
  • 133