Polymer 1.0 paper-item vertical alignmen issue in IE - polymer

Why does the content of the paper-item not vertical centered in IE like in Chrome in the example here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
<template is="dom-bind">
<paper-item style='background-color:Red'>Why is this not centered vertically in IE?</paper-item>
</template>
</body>
</html>
http://jsbin.com/busemomecu/1/edit?html,output
?
Cheers

Related

Polymer 2.x code works in jsbin but not in codepen, plunker or jsfiddle

The below code works properly in this jsbin but it does not work in either this codepen, this plunker or this jsfiddle.
Why not? How can I get it to work in the three locations where it does not?
http://jsbin.com/yudavucola/1/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Since every other site other than jsbin is using the secure version of HTTP i.e. HTTPS, the request to get the contents from the source http://polygit.org/polymer+:master/components/ is blocked. So, use secure connection and it will work in every other site.
You can check the console for more information.
Change <base> tag's href attribute from http://polygit.org/... to //polygit.org/.... This normalizes the import to work in both http and https environments.
Here are working examples in all repositories: JsBin, Codepen, Plunker and JsFiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Edit
Note that for a specific version of Polymer, you can use
<base href="//polygit.org/polymer2.0+:master/components/">
or
<base href="//polygit.org/polymer1.0+:master/components/">
etc.

Polymer app-drawer-layout responsiveWidth attribute

I am trying to follow the documentation (https://www.webcomponents.org/element/PolymerElements/app-layout/app-drawer-layout) for setting the responsiveWidth attribute on my app-drawer-layout in order to have the app-drawer closed by default:
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>title</title>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.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-scroll-effects/effects/waterfall.html">
<link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
</head>
<body unresolved class="fullbleed">
<app-drawer-layout fullbleed responsiveWidth="10000px">
<app-drawer>
drawer
</app-drawer>
<app-header-layout fullbleed>
<app-header reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>Title</div>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
</body>
</html>
My bower dependencies are:
"paper-elements": "polymerelements/paper-elements#latest",
"iron-elements": "polymerelements/iron-elements#latest",
"neon-elements": "polymerelements/neon-elements#latest",
"app-elements": "polymerelements/app-elements#latest"
Where am I going wrong?
EDIT: Should probably mention that I am running Chrome 49.
You want responsive-width not responsiveWidth.

Polymer paper-toolbar not working properly

I have the following html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/polymer/polymer.html" rel="import">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body>
<paper-toolbar>
<div class="title">Hello</div>
</paper-toolbar>
</body>
</html>
And the page has a white gap between toolbar and the margin.
How do I solve this?
Your problem is caused by an inherent margin: 8px on the <body> tag. To fix this, you simply need to specify a margin yourself in CSS:
body {
margin: 0;
}
Hope this helps!

The paper-header-panel or the paper-drawer-panel won't take the whole top edges of the browser window

Hello I am studying Google's Polymer I followed their guide about Responsive Material Design Layouts But I just noticed that the paper-drawer-panel won't take the whole edge of the top part of the browser window. It has a bit of a gap.
Here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<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/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<!-- 2. Use an HTML Import to bring in some elements. -->
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
The code will render this image as you can see there's a bit of a gap in the edges.
Am I missing something here? What's wrong with my code? Your help and explanation will greatly appreciated. Thanks! :)
You are missing the import of paper-styles.html

How do I get Polymer to work in IE11

I have a simple polymer app:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="x-ua-compatible" content="IE=10" >
<script type="text/javascript" src="components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="components/font-roboto/roboto.html">
<link rel="import" href="viewer-app.html">
<style>
html,body {
background-color: #fff;
font-family: 'RobotoDraft', sans-serif;
}
</style>
</head>
<body fullbleed vertical layout unresolved>
<template is="auto-binding">
<viewer-app fit></viewer-app>
</template>
</body>
the custom element 'viewer-app' does not even show up in f12 tools. I'm not getting any errors at all.
How do I get this to work?