Associating a paper-radio-button (wrapped by a div) with a paper-radio-group?

I can associate multiple paper-radio-buttons within a group by having the buttons be direct children of a paper-radio-group.

<paper-radio-group selected="{{someProperty}}">   <paper-radio-button name="foo">Foo</paper-radio-button>   <paper-radio-button name="bar">Bar</paper-radio-button>   <paper-radio-button name="baz">Baz</paper-radio-button> </paper-radio-group> 

However, if I wrap one of the paper-radio-buttons with a div like this, it loses association with the group (so one could select both that wrapped button and one of the others). This is a problem because I want to give that button a tooltip.

<paper-radio-group selected="{{someProperty}}">   <paper-radio-button name="foo">Foo</paper-radio-button>   <paper-radio-button name="bar">Bar</paper-radio-button>   <div>     <paper-radio-button name="baz">Baz</paper-radio-button>     <paper-tooltip>Tooltip text for baz.</paper-tooltip>   </div> </paper-radio-group> 

I tried using the for attribute of paper-tooltip, but that doesn't make the tooltip only appear when that specific button is hovered over.

How could I associate a paper-radio-button with a paper-radio-group without having the button be a direct child?

2 Answers

Answers 1

To add tooltips create an id for each radiobutton that needs a tooltip. You can then use for and refer to the id. There is no need for a wrapper div.

<paper-radio-group>     <paper-radio-button id="foo" name="foo">Foo</paper-radio-button>     <paper-tooltip for="foo">Tooltip text for foo.</paper-tooltip>     <paper-radio-button id="bar" name="bar">Bar</paper-radio-button>     <paper-tooltip for="bar">Tooltip text for bar.</paper-tooltip>     <paper-radio-button id="baz" name="baz">Baz</paper-radio-button>     <paper-tooltip for="baz">Tooltip text for baz.</paper-tooltip> </paper-radio-group> 

You can find a working demo in this plunk.

Answers 2

There are two problems with using div inside paper-radio-group

1. Paper-radio-group expects selectable element to be a paper-radio-button. This is a simple problem as radio-group has a property namedselectable` which you can overwrite to change this behavior.
2. Second and more complicated issue is that paper-radio-group toggles checked property on the element that you choose as selectable. One solution i was able to find for this was to ignore the checked that paper-radio-group sets and add a tap listener on all the div's to toggle in radio-buttons manually.

Having said that this solution will still work with all the direct child of radio-group being different instances of same HTML element.

<link rel="import" href="https://polygit.org/components/polymer/polymer.html">  <link rel="import" href="https://polygit.org/components/paper-radio-group/paper-radio-group.html">  <link rel="import" href="https://polygit.org/components/paper-radio-button/paper-radio-button.html">  <dom-module id="group-with-div">    <template>          <style></style>          <paper-radio-group selectable="div">              <div name="one" data-selected="1" on-tap="changeSelection">                  <paper-radio-button id="1">one</paper-radio-button>              </div>                 <div name="two" data-selected="2" on-tap="changeSelection">                  <paper-radio-button id="2">two</paper-radio-button>              </div>                 <div name="three" data-selected="3" on-tap="changeSelection">                  <paper-radio-button id="3">three</paper-radio-button>              </div>                        </paper-radio-group>      </template>  </dom-module>  <script>    Polymer({      is: 'group-with-div',      properties: {        },      changeSelection: function(e) {        for (var i = 1; i <= 3; i++) { //i should be less than number of radio buttons (this code is mainly added to handle dynamically created buttons)          if (e.currentTarget.attributes['data-selected'].value == i) {            this.$[i].set('checked', true);          } else {            this.$[i].set('checked', false);          }        }      }    })  </script>      <group-with-div></group-with-div>

Read More

Why is my Polymer iron-icon appearing below my paper-input on navigation?

I have some simple code (Angular2 + Polymer) that creates a paper-input with a iron-icon as a suffix icon:

 <paper-input type="text" [control]="email" label="Email">        <iron-icon suffix icon="mail"></iron-icon>  </paper-input> 

Here is the full page, note that the materialize grid and row classes are the only materialize classes I brought into the project:

<div class="section">     <h1 class="paper-font-headline">Admin Registration</h1>      <div class="row">         <div class="col s12 m6 6">             <p class="paper-font-body2">some stuff here</p>         </div>          <div class="col s12 m6 6">             <paper-card class="stretch">                 <div class="sub-section">                     <form>                         <paper-input type="text"                                      [control]="email"                                      label="Email">                             <iron-icon suffix icon="mail"></iron-icon>                         </paper-input>                     </form>                 </div>             </paper-card>         </div>     </div> </div> 

This looks pretty good on page load:

When I navigate away from the page and back, however, the icon falls below the input:

In the html you can clearly see that the icon is placed outside of the paper-input-container on navigation.

Has anyone seen this before? I am at a loss. One thing to note is this only happens when I use webcomponents-lite.js in my index.html file. webcomponents.js has other issues when used (shouldn't be used) but this is not one of them. This is Polymer 1.0. Thanks!

Edit:

This is not an issue in Chrome, but in the other major browsers.

Here are my imports in case they are relevant:

    <!-- 1. Load libraries -->     <!-- IE required polyfills, in this exact order -->     <script src="node_modules/es6-shim/es6-shim.min.js"></script>     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>     <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>      <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>     <script>         window.Polymer = window.Polymer || {};         window.Polymer.dom = 'shadow';     </script>      <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>     <script src="node_modules/systemjs/dist/system.src.js"></script>     <script src="node_modules/rxjs/bundles/Rx.js"></script>     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>     <script src="node_modules/angular2/bundles/http.dev.js"></script>     <script src="node_modules/rxjs/bundles/Rx.js"></script>     <script src="node_modules/angular2/bundles/router.dev.js"></script>      <link rel="import" href="bower_components/paper-styles/classes/global.html">     <link rel="import" href="bower_components/paper-styles/classes/shadow.html">     <link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html">     <link rel="import" href="bower_components/paper-styles/classes/typography.html">      <link rel="import" href="bower_components/polymer/polymer.html">     <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">     <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">     <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">     <link rel="import" href="bower_components/paper-menu/paper-menu.html">     <link rel="import" href="bower_components/paper-item/paper-item.html">     <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">     <link rel="import" href="bower_components/iron-icon/iron-icon.html">     <link rel="import" href="bower_components/iron-icons/iron-icons.html">     <link rel="import" href="bower_components/paper-ripple/paper-ripple.html">     <link rel="import" href="bower_components/paper-card/paper-card.html">     <link rel="import" href="bower_components/paper-input/paper-input.html"> 

Here are my bower.json dependencies:

"dependencies": {     "webcomponentsjs": "~0.7.21",     "polymer": "Polymer/polymer#~1.3.0",     "paper-elements": "PolymerElements/paper-elements#~1.0.7"   } 

1 Answers

Answers 1

<link rel="import" href="../paper-input/paper-input.html"> <link rel="import" href="../core-icons/core-icons.html"> <link rel="import" href="../core-icon/core-icon.html">  <polymer-element name="my-element">    <template>     <style>           #paper_input {         left: 380px;         top: 380px;         position: absolute;       }       #core_icon {         left: 530px;         top: 390px;         position: absolute;       }     </style>     <paper-input label="Type something..." id="paper_input"></paper-input>     <core-icon icon="mail" id="core_icon"></core-icon>   </template>    <script>      Polymer({      });    </script>  </polymer-element> 

Read More