polymer core-header-panel height issue - polymer

Why are these two snippets different?
The first snippet works as expected
The second is just a copy of the contents of the body tag placed into a custom element called my-header and my-header is inserted into the body tag
The second one is not honoring the height of the body tag using fullbleed layout vertical.
<!doctype html>
<html>
<head>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
</head>
<body fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">Content goes here...</div>
</core-header-panel>
</body>
</html>
<!doctype html>
<html>
<head>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<polymer-element name="my-header" attributes="">
<template>
<style>
</style>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">Content goes here...</div>
</core-header-panel>
</template>
<script>
(function () {
Polymer({
// define element prototype here
});
})();
</script>
</polymer-element>
</head>
<body fullbleed layout vertical>
<my-header></my-header>
</body>
</html>

You just need to add the height to your element and core-header-panel
<style>
:host, core-header-panel {
height: 100%;
}
</style>
<!doctype html>
<html>
<head>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<polymer-element name="my-header">
<template>
<style>
:host,
core-header-panel {
height: 100%;
}
</style>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">Content goes here...</div>
</core-header-panel>
</template>
<script>
(function() {
Polymer({
// define element prototype here
});
})();
</script>
</polymer-element>
</head>
<body fullbleed layout vertical>
<my-header></my-header>
</body>
</html>

Related

Polymer 1.x: Help getting this JSBin to render <paper-header-panel> and <paper-toolbar>

http://jsbin.com/mefonoqanu/1/edit?html,output
This JSBin doesn't render its contents. It does not display:
its header section — the <paper-toolbar> text (i.e., "Header") or
its content panel section — the <div> element (i.e., "Content goes here...").
What am I doing wrong? Please provide a working JSBin example.
Note: Per this link, <paper-header-panel> requires host to have a height.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar>Header</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
http://jsbin.com/kabede/5/edit?html,output
The changes:
webcomponents from rawgit instead of bower_components
<span class="title"> to make header visible
style="width:100%; height: 100%;" on element to see its content
Code of accepted answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="http://element-party.xyz/">
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element style="width:100%; height: 100%;"></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar ><span class="title">Header</span></paper-toolbar>
<div >
Content goes here...<br>
</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</html>
Here is the minimum markup necessary to answer the question:
http://jsbin.com/jocinasovo/edit?html,output
Changes
Added style using :host
Only need height not width
No need to switch from bower_components (per this link) to rawgit CDN
No need for .flex class on <paper-header-panel>
Note: Per this link, <paper-header-panel> requires host to have a height.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
:host {
height: 100%
}
</style>
<paper-header-panel>
<paper-toolbar><span>Header</span></paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>

Polymer 1.x: How to align buttons and button text inside <paper-toolbar>?

In this JSBin I need to:
align the two buttons in the toolbar flush with the right edge of the viewport (right justify) and
vertically align the text to the middle of the buttons
Please provide a working JSBin example of how to do that.
Code
http://jsbin.com/nimoyomali/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button style="background:white;
color:black;
height:100%;
border-radius:0px;
margin:0;
border-left:solid 1px black;"
>Button 1</paper-button>
<paper-button style="background:white;
color: black;
height: 100%;
border-radius: 0px;
margin: 0;
border-left: 1px solid black;
vertical-align: middle;"
>Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
To center the text within the paper-button, you can try -
paper-button {
--paper-button: {
#apply(--layout-vertical);
#apply(--layout-center-center);
};
}
The paper-toolbar has a default left and right padding of 16px. The easiest way to get rid of it is to apply a -16px right margin to the right button.
See this jsbin for a working demo.
And here is the JSbin with the margin applied.
Code
http://jsbin.com/vikazaqedu/3/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="paper-button/paper-button.html">
<style is="custom-style">
paper-button {
--paper-button: {
#apply(--layout-vertical);
#apply(--layout-center-center);
};
background:white;
color:black;
height:100%;
border-radius:0;
border-left:solid 1px black;
margin:0;
}
paper-button.last {
margin: 0 -16px 0 0;
}
</style>
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button>Button 1</paper-button>
<paper-button class="last">Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>

Polymer 1.0: paper-tooltip not working

I can't seem to get <paper-tooltip> element to work for me.
Here is my JSBin.
What am I doing wrong?
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<style></style>
<div class="with-tooltip" tabindex="0">
<input type="checkbox">Oxygen
<paper-tooltip>Atomic number: 8</paper-tooltip>
</div>
<paper-icon-button id="heart" icon="favorite" alt="heart"></paper-icon-button>
<paper-icon-button id="back" icon="arrow-back" alt="go back"></paper-icon-button>
<paper-icon-button id="fwd" icon="arrow-forward" alt="go forward"></paper-icon-button>
<paper-tooltip for="heart" margin-top="0"><3 <3 <3 </paper-tooltip>
<paper-tooltip for="back" margin-top="0">halp I am trapped in a tooltip</paper-tooltip>
<paper-tooltip for="fwd" margin-top="0">back to the future</paper-tooltip>
</template>
<script>
// only need this when both (1) in the main document and
// (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-foo"
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Summary from comments:
Per #kevinashcraft:
You have to import paper-icon-button, iron-icons, and paper-tooltip. Here's a working JSBin.

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code below you can see my commented section in which the paper-items are hard-coded. This works fine.
My next step was to try and build my menu dynamically by using the <template is="dom-repeat"> element to iterate over an arbitrary array of menu items. The menu is rendered correctly (I can see all the menu items that are bound to the array), but I cannot click on the items and no iron-pages are displayed. It seems that the data-category attribute which is used for attr-for-selected is not working inside <template is="dom-repeat">.
In what ways can I get this to work?
Edit: Removing the attr-for-selected attributes and switching the iron-pages using the index work, but relying on the index of the array is not an option in my situation.
My index.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
Try <paper-item data-category$="{{item.itemNum}}" label$="{{item.itemNum}}">, from the docs, that will call paper-item.setAttribute('data-category', itemNum) instead of paper-item.data-category = itemNum.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding

Setting the height of core-pages elements?

I'm having a lot of trouble getting a core-pages element to have a non-zero height within my custom element. What is the best practice for having the core-pages height be the same as its selected content. Here's a trivial example which clearly breaks:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
</head>
<body>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">
<polymer-element name="x-foo">
<template>
<core-pages id="pages" selected="{{selected}}">
<content></content>
</core-pages>
</template>
<script>
Polymer('x-foo', {
ready: function() {
this.selected = 0;
}
});
</script>
</polymer-element>
<polymer-element name="x-bar">
<template>
<div><content></content></div>
</template>
<script>
Polymer('x-bar', {});
</script>
</polymer-element>
<p>BEFORE</p>
<x-foo>
<x-bar>some text here</x-bar>
<x-bar>some other text here</x-bar>
</x-foo>
<p>AFTER</p>
</body>
</html>
And the jsbin to see the results: http://jsbin.com/xowoxakuwu/1/edit (notice how the core pages content overlaps with the next element)
This example shows a core-pages element within a custom element. The content that gets injected into the core-pages are also custom elements.
Whats the best practice here?
You can apply a style to the currently selected page in the x-foo element which sets display: block and position: relative so x-bar will inherit the height of it's content.
I've also added the "block" attribute to the x-foo element so it too inherits the height of the selected page. Other general attributes are here -> https://www.polymer-project.org/docs/polymer/layout-attrs.html#general-purpose-attributes
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">
<polymer-element name="x-foo" block>
<template>
<style>
::content > .core-selected {
position: relative;
display: block;
}
</style>
<core-pages id="pages" selected="{{selected}}">
<content></content>
</core-pages>
</template>
<script>
Polymer('x-foo', {
ready: function() {
this.selected = 0;
}
});
</script>
</polymer-element>
<polymer-element name="x-bar">
<template>
<div>
<content></content>
</div>
</template>
<script>
Polymer('x-bar', {});
</script>
</polymer-element>
<p>BEFORE</p>
<x-foo>
<x-bar>some text here</x-bar>
<x-bar>some other text here</x-bar>
</x-foo>
<p>AFTER</p>