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
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.
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.
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!
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
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?