Can't see the value inside the input and the menu has horizontal scrollbars, even with small words.
Have you experienced the same issue and found a solution?
I opened a thread on github project if anyone interested.
Here is some code I used (this code is a part of a larger module and I use webcomponents.js to make it work):
<dom-module id="test-form">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<template>
<paper-dropdown-menu label="Center">
<paper-menu class="dropdown-content">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: "test-form"
});
</script>
</dom-module>
[Edited to remove parts about wc being supported by polymer on IE10, since accepted answer changed]
Your component name must include a dash.
Polymer is based on http://webcomponents.org/. You can see that IE and Safari do not support it. EDGE will probably support it, but don't hold your breath.
Related
I seem to have misplaced several dozen IQ points....
I'm trying to catch an iron-items-changed event from a paper-dropdown-menu from the host. For the life of me I can't figure out (or find an example of) the syntax.
<paper-listbox .... onclick="doSomething()">
works fine. But oniron-items-changed doesn't. Nor does on-iron-items-changed. Nor onIronItemsChanged. Or any other variation of the event name that I can think of.
Anyway, can someone help? Please???
UPDATE:
I'm beginning to think the problem is that it's an event bubbling issue. I tried moving the attribute up a level to the paper-dropdown-menu element, but that didn't help. Any ideas? Here's the HTML that's being delivered to the browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link href="/Content/site.css" rel="stylesheet"/>
<link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<style>
#pageContent {
margin: 20px;
}
</style>
</head>
<body unresolved>
<app-header-layout>
<app-header slot="header" fixed condenses shadow effects="waterfall">
<app-toolbar>
<div main-title>FTI Calculation Editor</div>
</app-toolbar>
</app-header>
<div id="pageContent">
<paper-dropdown-menu label="Master" id="master" on-selected-item-changed="doSomething" >
<paper-listbox slot="dropdown-content" >
<paper-item>Test One</paper-item>
<paper-item>Test Three</paper-item>
<paper-item>Test Two</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<p></p>
<paper-dropdown-menu label="Child" id="child">
<paper-listbox slot="dropdown-content">
<paper-item>C 1-1</paper-item>
<paper-item>C 1-2</paper-item>
<paper-item>C 1-3</paper-item>
<paper-item>C 2</paper-item>
<paper-item>C 3-1</paper-item>
<paper-item>C 3-3</paper-item>
<paper-item>C 3-4</paper-item>
<paper-item>C-3-2</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</app-header-layout>
<script>
function doSomething(e) {
alert("got here");
}
</script>
</body>
</html>
Probably obvious, but what I'm ultimately trying to achieve is to filter the second dropdown based on the selection in the first. If somebody knows a better/easier way to achieve that, I'd be delighted to know....
Just look into documentation. It points you to a good path. As you can see in documentation, there is -on-iron-items-changed so problem must be somewhere else.
You can't call functions with () at the end. You need to point to some function and not actually call it. So rewrite your code to:
<paper-listbox .... on-iron-items-changed="doSomething">
The way you get the event with onclick="domsomething()" does something because you are not using the actual Polymer syntax, that's the "old" HTML way to catch the click even. But you might not want that, at least because it's not the best when it comes to touch devices support (there's on-tap for tat).
But in your case, now, the other answer was pretty close. First of all you don't need to call a function, you need to pass a name that can be used by the paper-listbox element as a callback.
The only difference is that you are not interested in the event triggered when the items are changed. That would be when the list changes. I am guessing that you are interested in the event triggered when the selected one changes. So on that page you can see that there's an event called selected-item-changed. That would mean that that you can use the on-selected-item-changed attribute to define a callback for that event.
So please try:
<paper-listbox .... on-iron-items-changed="doSomething">
You doSomething method will get one parameter, the event object.
I am following this YouTube video and I have seen every previous video in the tutorial series.
This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body>
<hello-world></hello-world>
</body>
</html>
And the second page:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name='hello-world' noscript>
<template>
<h1>Hello World</h1>
</template>
</polymer-element>
But my page is still blank, what am I doing wrong?
I use Wamp.
It's always happen to me if i'm not correctly import an element or library. So make sure all path locations are correct.
Make sure you use 0.5 version because in 0.8 custom element declaration is using <dom-module id="element-name"></dom-module>
First check your polymer version. it is found on bower.json under dependencies
check "polymer": "Polymer/polymer#^1.7.0" as you can see mine is 1.7.0. if you are using polymer 1.0 and above. the custom element declaration has been changed.
Here is a detailed note on what you have to do.
Change <script src="bower_components/webcomponentsjs/webcomponents.js"></script> to <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
Custom element declaration has also been changed from
<polymer-element name="hello-world">
<template>
<div>Hello World</div>
</template>
<script>
Polymer();
</script>
</polymer-element>
to
<dom-module id="hello-world">
<template>
<div>Hello World</div>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
Check The Migration Guide Page https://www.polymer-project.org/1.0/docs/migration
Following is the code, with paper-input in body but it ceases to render.
I was able to render paper-button though.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/paper-input/paper-input.html">
<body unresolved>
<paper-input label="India"></paper-input>
</body>
I know you have probably resolved your issue by now, hopefully but for others who may run into the same issue, try adding this inside your head tag:
<link rel="import" href="bower_components/paper-input/paper-input.html">
It looks like you did not import paper-input correctly.
Had the same issue and then found out I had paper-input v1.2
I reinstalled it and it changed to 2.x, then it started working.
Say I've got one polymer app test-app, one regular div div-a, and one polymer element page-a.
Now I'm trying to build a animated-pages, which contains div-a and page-a
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../page-a/page-a.html">
<polymer-element name="test-app" flex vertical layout>
<template>
<core-animated-pages
selected="{{selected}}"
transitions="cross-fade"
>
<section name="div-a">
<div cross-fade>
<span>div-a</span>
</div>
</section>
<section name="page-a">
<page-a cross-fade></page-a>
</section>
</core-animated-pages>
</template>
<script src="./test-app.js"></script>
</polymer-element>
The problem is: when performing the transition, the animation on div-a works fine, but the one on page-a doesnot work. Instead of fading in, the page-a just suddenly appears.
Another strange point is: if I change transitions="cross-fade" into transitions="cross-fade-all", and remove other cross-fade defined on div and page-a, both transitions work find.
Any idea?
Cross-fade doesn't work directly on elements that have overflow: hidden set.
As far as I can tell from the documentation here and here, the following should be right. But it's not working. I get no errors. My page just says "test test" (You'll see why in the code). What is wrong?
NOTE I had this working fine with core-ajax directly in a single blog entry, so I know my data is fine, etc
slog-entry.html this is the element for each entry in my demo blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../core-ajax/core-ajax.html" rel="import">
<polymer-element name="slog-entry" noscript>
<template>
<h1>{{entry.Title}}</h1>
<p>{{entry.Text}}</p>
<span>{{entry.timestamp}}</span>
</template>
</polymer-element>
slog-entries.html this is the element for the collection of entries in my blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../slog-entry/slog-entry.html" rel="import">
<polymer-element name="slog-entries" noscript>
<template>
<core-ajax auto
url="https://<server>/entries.json"
response="{{entries}}">
</core-ajax>
test
<template repeat="{{entry in entries}}">
<slog-entry bind="{{entry}}"></slog-entry>
</template>
</template>
</polymer-element>
slog.html this is the index
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Status Log 0.1b</title>
<script src="templates/platform/platform.js"></script>
<link href="templates/slog-entries/slog-entries.html" rel="import">
<link href="templates/polymer/polymer.html" rel="import">
</head>
<body>
test
<slog-entries></slog-entries>
</body>
</html>
UPDATE Here is what the DOM looks like:
Your syntax bind="{{entry}}" doesn't do what I suspect you want it to do.
Polymer binding uses a syntax like this <name of thing to bind to>="{{<source value>}}".
Now, in order to have a name of thing to bind to, elements must publish those names.
So, slog-entry has to look like this:
<polymer-element name="slog-entry" attributes="entry" noscript>
The attributes="entry" bit on the element causes slog-entry to accept bindings to property entry (this is what we call publishing).
Now your repeat can look like this:
<template repeat="{{entry in entries}}">
<slog-entry entry="{{entry}}"></slog-entry>
</template>
We are telling the system to bind the entry property of each slog-entry to the entry value at each repeat.