0

I'm relatively new to Polymer and I am trying to create a button group with a button corresponding to each entry in a property array. Here is the code that I have so far:

<div class="btn-group">
           <template is="dom-repeat" items="{{floorCount}}">
             <input id="button-[[index]]" name="btn-group" type="radio">
             <label style="width:[[getLevelButtonWidth(floorCount)]]% !important;" for="button-[[index]]" class="btn">[[item]]</label>
           </template>
           <input id="idAll" name="btn-group"  type="radio">
           <label style="width:[[getLevelButtonWidth(floorCount)]]% !important;" for="idAll" class="btn">All</label>
         </div>

The floor count property has been included below.

floorCount:{
      type: Array,
      value: function(){
        return ["1"];
      }
    }

The issue is that it correctly creates each of the buttons, but for some reason, you can only click on the "idAll" button in the group. This dom-repeat and binding is somehow breaking the functionality of the group. Any help would be appreciated, thanks!

Joe Kollin
  • 13
  • 4

1 Answers1

0

Polymer does not like to concat Strings in properties on the fly id$="[[_getId(index)]]" also when writing into a html default property add an $, same for the style property.

Pascal L.
  • 1,261
  • 9
  • 21