We can set iron-icon as prefix to paper-input like this
<paper-input label="username" id="inputWithButton">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
<paper-icon-button suffix onclick="clearInput()" icon="clear" alt="clear" title="clear"></paper-icon-button>
</paper-input>
How to place this in paper-automplete?
I tried this but not working
<paper-autocomplete id="styled" min-length="1" source="{{data}}" placeholder="Search" disable-show-clear alwaysFloatLabel>
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
<paper-icon-button suffix onclick="clearInput()" icon="clear" alt="clear" title="clear"></paper-icon-button>
</paper-autocomplete>
Thanks in advance :)
paper-autocomplete is not from Polymer developers. So it's not supporting prefix and postfix. As i am looking into source code, they don't really support it in any way. Also they already defined suffix as some kind of delete button.
https://github.com/ellipticaljs/paper-autocomplete/blob/master/paper-autocomplete.html
You have an option to edit their code ( i have no idea how about license ) or just make workaround with css positioning
Related
In this tag:
<paper-item noink="true"> Some text </paper-item>
How does noink="true" affect the behavior of the paper-item tag?
The noink attribute in Polymer disables the ripple effect that you see on click.
This isn't unique to <paper-items>, but rather can be applied to any Polymer elements:
<paper-button noink>No Ink<paper-button>
<paper-tabs noink>No Ink<paper-tabs>
Note that the ="true" is not necessary; simply providing the attribute will make it true by default.
I have included api, before everything were working perfect in polymer 1.7, after upgraded to polymer ^2.0 google map does not renders.
here is my code in main app page written polymer class base:
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
<jj-maps name="maps" user="{{user}}" sprof="{{sprof}}"></jj-maps>
<jj-list name="list" > Jobs </jj-list>
<jj-infos name="infos"> infos </jj-infos>
<jj-contacts name="contacts" > Contacts </jj-contacts>
<jj-messages name="messages"> Messages </jj-messages>
<jj-404 name="404" > 404 </jj-404>
</iron-pages>
at jj-maps.html code sample is :
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">
style codes in template tag:
<dom-module id="jj-maps">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
.....
google-map, #mapResults {
margin-top: 10px;
position: relative;
height: 100vh;
width: 100vh%;
z-index: 1;
}
....
<div id="mapResults">
<google-map
id="map"
map="{{map}}"
latitude="[[latitude]]"
longitude="[[longitude]]"
zoom="10"
api-key="[[myApiKey]]"
on-google-map-ready= '_mapLoaded'
additional-map-options='{"gestureHandling" : "greedy"}'
>
<google-map-marker map="{{map}}" slot="marker" latitude="{{latitude}}" longitude="{{longitude}}"
title="You are here !" icon="./src/image/gpslocc.png" draggable="true">
</google-map-marker>
<template is="dom-repeat" items="{{sprof}}" as="item">
<google-map-marker map="[[map]]" slot="marker" latitude="[[item.myLat]]" longitude="[[item.myLng]]" animation="DROP" click-events title="{{item.prof}}" icon="{{calculateIconType(item.isFree)}}" on-google-map-marker-click='showUserDetail' userid="[[item.uid]]" isFree="{{item.isFree}}" >
</google-map-marker>
</template>
<paper-fab icon="maps:my-location" on-tap="updateCurrentPosition"></paper-fab>
</google-map>
</div>
</template>
this code works perfect in previous polymer. And Another point when I bower install the dependencies as bower install --save GoogleWebComponents/google-map
bower asks me for two as :
- Unable to find a suitable version for polymer, please choose one by typing one of the numbers below:
I chose : 7) polymer#^2.0.0 which resolved to 2.0.1 and is required by myApp
- Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below:
I chose : 2) webcomponentsjs#^1.0.0 which resolved to 1.0.1 and is required by myApp
Sorry in advance that I ve written detailed codes. Meanwhile I have tried many options but could not able to render map in my jj-maps elements (class base template, even I have tried legacy template (as same as polymer 1.7 ver)
Here is is console warning :
dom-module.html:24 dom-module google-map has style outside template
dom-module google-map-marker has style outside template
Maps are not rendering...
So, how to solve ? Thanks in advance. (previous polymer ver. working at jobijoy.com
I'm having exactly same issue. Tried to add slot="marker" to google-map-marker as someone suggested Polymer 2.0 issue in github but doesn't work for me. It looks like the google-map component's size is set to 0 by 0 thus does not display at all. Since the google components are not updated to be compatible with Polymer 2.0. I've manually updated my local google-map.html and google-map-marker.html files under bower_component folder and moved the style tags into the template tags. The warnings are gone and the map displays now. I guess we have to wait for the update of the google components for things to work properly. I hope this helps.
slot="marker"
should solve the issue.
Unfortunately the example in the code does not insert this important line.
Here is the without slot="markers" current code example:
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
<google-map-marker latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
</google-map-marker>
<google-map-marker latitude="37.777" longitude="-122.38911">
</google-map-marker>
</google-map>
And below the suggested corrected example that should be inside the code:
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
<google-map-marker slot="markers" latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
</google-map-marker>
<google-map-marker slot="markers" latitude="37.777" longitude="-122.38911">
</google-map-marker>
</google-map>
What is happening?
google-map does not know when markers are inserted or updated because without the attribute slot="markers" they are inserted outside the slot where they should be inserted in.
Several consequences can happen from this issue: the map can be viewed, but not respond to important events, like fit-to-markers.
In these turbulent moves from original without-slots version to the current slotted version (and soon moving to polymer 3.0 version) of the excellent google-map webcomponent, there is a high chance that the busy developers simply forgot to add this important slot="markers" attribute in the example that shows how to add each new google-map-marker webcomponent inside google-map.
This only complements the already correct above answer. If anyone needed more explanation, I offer these, If I am correct, of course (please correct me if I made wrong conclusions).
You can detect this flaw inspecting your google-map element. Without the slot="markers" correction, open google-map; inside it, open iron-selector; and finally inside it open the element <slot id="markers" name="markers"><slot>. If you do not use the suggested correction, this slot will be empty. If you use this suggested correction, this slot will contain references to each google-map-marker. And so the google-map element will be able to handle several events that rely on detecting when each marker is inserted or updated.
Sorry for the long answer.
I want to be able to place the paper-icon-button to the right/end of the paper-toolbar. This is what I have tried.
<paper-toolbar class="toolbar" justify="end">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<span class="title">{{page}}</span>
<paper-icon-button icon="check-box" class="justify"></paper-icon-button>
</paper-toolbar>
I have tried with middle-justify and bottom-justify too. The effect currently is they are placed side by side
Also I have tried the demo here https://elements.polymer-project.org/elements/paper-toolbar?view=demo:demo/index.html&active=paper-toolbar
cant achieve that effect.
Any suggestions or examples thanks.
You can use the iron-flex-layout. Import it and then add the class="flex" to the <span>
Why don't you try float:right css property on your paper-icon-buttons
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader" style="height:100px; background-color:#E5E5E5; padding-top:18px;">
<span><my-logo>
<img src="images/logo.png" />
</my-logo></span>
</core-toolbar>
<core-menu>
<core-item name="livemusic" label="Live music"><paper-ripple></paper-ripple></core-item>
</core-menu>
</core-header-panel>
<paper-input label="Your Name" block></paper-input>
</core-scaffold>
I want the paper-input to show in the navigation bar. But it doesn't. how do I do it? (I tried to put it within the core-toolbar tags)
Thanks in advance
If you put it in your core-toolbar it should work.
Have you tried using other html to test if it really is just the papêr-input, or any html ? If this is only the paper-input, it's probably just an import issue (as peter said). If not, it's probably a css issue.
Anyway, sending us a plunk link would help us.
I have the following polymer:
<polymer-element name="popup-element" attributes="popupStyle">
<template>
<div class="popup" id="popup" style="{{popupStyle}}">
<div class="closebutton"></div>
<content select=".title"></content>
<br /><br />
<content></content>
</div>
</template>
<script type="text/javascript">
Polymer('popup-element');
</script>
</polymer-element>
Now I want to extend it in another polymer:
<polymer-element name="newfolder-element" attributes="popupStyle" extends="popup-element">
<template>
<shadow>
<span class="title">Utwórz nowy folder</span>
<input type="text" class="ginput" style="width: 350px; padding: 5px;" placeholder="Nowy katalog" />
<br />
<button class="action blue"><span class="label">Utwórz</span></button>
<button class="action red" id="cancelBtn" on-click="{{closePopup}}"><span class="label">Anuluj</span></button>
<content></content>
</shadow>
</template>
<script>
Polymer('newfolder-element');
</script>
</polymer-element>
Why content between <shadow> and </shadow> doesn't appear. I want to place content of <shadow> ... </shadow> (child element) to <content></content> of parent element. How to make it working ?
This used to be supported, but due to implementation concerns, it was removed. It will most likely be added in a future revision to the Shadow DOM spec.
Update: Here's a possible interim solution to this problem.
This almost makes the extends feature useless for template inheritance! I take a look at all the core-elements and paper-elements, rarely are they reusing templates from their base element. To get around this limitation I have to use a preprocessor like jade to mix-in partials. But if polymer or the spec can support this, it will be much more convenient. A little bit frustrating that I need to spend so much time just to fix something that should be there.