googlearchive / paper-radio-group

A group of radio buttons
6 stars 4 forks source link

polymer 1.0 Paper Radio Group not working with dom-repeat and selected attributes #15

Closed ghawkins-pulsemining closed 9 years ago

ghawkins-pulsemining commented 9 years ago

Hi, I am having issues in polymer 1.0 with the paper radio group, specifically when using the selected attribute, but only when the paper-radio-buttons contained within are in a dom-repeat template.

Also note that If any dom-repeat template breaks, all break paper-radio-group dom-repeat templates break. i.e if second group below is commented out, the first one works, if it is included, both the first and second templated groups break. Selected attribute always works on non-templated radio buttons in the group.

<p>works</p>
<paper-radio-group>
  <template is="dom-repeat" items="{{sizes}}">
    <paper-radio-button name="{{item.name}}" >{{item.name}}</paper-radio-button>
  </template>
</paper-radio-group>

<p>Doesn't work</p>
<paper-radio-group selected="Large">
  <template is="dom-repeat" items="{{sizes}}">
    <paper-radio-button name="{{item.name}}" >{{item.name}}</paper-radio-button>
  </template>
</paper-radio-group>

<p>works</p>
<paper-radio-group>
  <paper-radio-button name="Small" >Small</paper-radio-button>
  <paper-radio-button name="Medium" >Medium</paper-radio-button>
  <paper-radio-button name="Large" >Large</paper-radio-button>
</paper-radio-group>

<p>works</p>
<paper-radio-group selected="Large">
  <paper-radio-button name="Small" >Small</paper-radio-button>
  <paper-radio-button name="Medium" >Medium</paper-radio-button>
  <paper-radio-button name="Large" >Large</paper-radio-button>
</paper-radio-group>

and defining the equivalent sizes array in ready: ready: function() { this.sizes = [{name:'Small'},{name:'Medium'},{name:'Large'}]; }

On a side note also, i am trying to set vertical layout to the buttons (<paper-radio-button vertical$="{{vertical}}">), which i can do using the @apply(--layout-vertical); style, however alignment is forced in flex-direction: column. Only way i can get it to align correctly with the radio buttons with their labels is to force flex-direction: row using !important. Is there a good way of toggling vertical alignment?

Many thanks, Grant.

ghawkins-pulsemining commented 9 years ago

Sorry, just realised this was for pre 0.5 polymer, will move to current......