Polymer paper-header-panel won't render properly - polymer

I posted kinda similar problem here in StackOverFlow regarding paper-header-panel of Polymer it was answered but the solution isn't efficient or right way of doing it, you can look it here. Specific import should be made not the generic one as mentioned here.
My code for rendering it properly is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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/classes/iron-flex-layout.html">
</head>
<body class="fullbleed layout vertical">
<!-- paper-header-panel must have an explicit height -->
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
</html>
But the problem is that this import is already been deprecated.
<link rel="import"
href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
The documentations recommended to use the new class which is.
<link rel="import"
href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
But it doesn't render properly the paper-header-panel.
What did I miss? Or what is my mistake? Any help would be deeply appreciated. Thanks!

From the source: https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html
A set of layout classes that let you specify layout properties directly in markup.
You must include this file in every element that needs to use them.
Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
</div>
The following imports are available:
iron-flex
iron-flex-reverse
iron-flex-alignment
iron-flex-factors
iron-positioning
You'd only have to include the iron-flex and iron-positioning style modules for your use case.
Ex.
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-positioning"></style>
<body class="fullbleed layout vertical">
<!-- paper-header-panel must have an explicit height -->
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>

Related

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

Getting Started with Paper Element Theming in Polymer

I am trying to learn how to use Paper Elements within Polymer 1.0. When I add basic elements like a button, they are not styled properly. I see a button shape with a shadow. However, I cannot get any colors to appear. Everything is just white. Here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="res/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="res/components/polymer/polymer.html">
<!-- Iron Elements -->
<link rel="import" href="res/components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="res/components/iron-pages/iron-pages.html">
<link rel="import" href="res/components/iron-signals/iron-signals.html">
<!-- Paper Elements -->
<link rel="import" href="res/components/paper-button/paper-button.html">
<link rel="import" href="res/components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/components/paper-toolbar/paper-toolbar.html">
<!-- Neon Elements -->
<link rel="import" href="res/components/neon-animation/neon-animated-pages.html">
<link rel="import" href="res/components/neon-animation/neon-animatable.html">
<link rel="import" href="res/components/neon-animation/neon-animations.html">
</head>
<body class="fullbleed">
<div class="flex">
<div class="vertical layout center-justified">
<h4>Welcome</h4>
<paper-button tabindex="0" on-click="_onLoginButtonClick" raised class="colorful custom">Login</paper-button>
<paper-button on-click="_onSignUpButtonClick">Sign Up</paper-button>
</div>
</div>
</body>
</html>
I was trying to show just a blue button that is consistent with the material design theme. So, I added raised class="colorful" as shown in the demo. However, I do not get a blue button. When I looked at the code on GitHub, I noticed that they seem to be defining ALL of the color classes in the style section.
Is there a way to just bring in theme? Or do I have to actually define all of the colors?
Thanks

Polymer 1.0 Paper-Tabs Are Not Responsive To Content

Using Polymer 1.0, the paper-tab elements are not responsive to the size of their content/titles. Instead, all the tabs are a fixed size and it looks bad. From what I can tell, the default behavior is for them to be responsive to the title.
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body>
<paper-header-panel>
<paper-toolbar>
<paper-tabs>
<paper-tab>
ABOUT
</paper-tab>
<paper-tab>
<div>
TOUR SCHEDULE
</div>
</paper-tab>
<paper-tab>
<div>
VIDEOS
</div>
</paper-tab>
<paper-tab>
<div>
HOST
</div>
</paper-tab>
<paper-tab>
<div>
LONG TITLE THIS IS
</div>
</paper-tab>
</paper-tabs>
</paper-toolbar>
</paper-header-panel>
</body>
</script>
</html>
If you want the tabs to fit to their content, you can override the default tab flexing:
<style is="custom-style">
paper-tab {
flex: none;
}
</style>
http://jsbin.com/bizoso/edit?html,output
If you want the tabs to fill the toolbar, you can class="flex" to paper-tabs.
<paper-tabs class="flex">
http://jsbin.com/xevepi/edit?html,output
Try importing iron-flex-layout (make sure it's in your bower_components folder!) and using the selected and flex attributes like so:
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
...
<paper-tabs scrollable flex>
<paper-tab>
...
</paper-tab>
</paper-tabs>

Polymer core-input not rendering

I have code as follows:
<body unresolved>
<core-header-panel>
<core-toolbar layout horizontal center>
<h1 flex>Title</h1>
Users
Terms
</core-toolbar>
<div class="container" layout horizontal>
<core-input placeholder="Placeholder text here"></core-input>
</div>
</core-header-panel>
</body>
The problem is that my core-input component doesn't get rendered. The core-header panel and core-toolbar do, but the core-input doesn't. It gets a width and height of 0px. Even if I assign width and height to it, it renders with nothing inside. I'm loading all components using imports.
Am I missing something?
Imports are:
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../custom-components/admin-users.html">
<link rel="import" href="../components/core-input/core-input.html">
Chrome is version 38.
From the documentation:
Important: The core-header-panel will not display if its parent does not have a height.
Styling the core-header-panel with the appropriate height and width properties will display the placeholder. Live Demo available here.
Update your HTML imports to include core-toolbar:
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/core-input/core-input.html">
And add this styling on the same page as your HTML imports:
<style>
core-header-panel {
width: 360px;
height: 400px;
}
</style>
Replace
<core-input placeholder="Placeholder text here"></core-input>
with
<input is="core-input" placeholder="Placeholder text here">

polymer absolute image position

I'm trying to learn Google Polymer, but I seem to fail at really simple things...
I currently have a drawer and a main page with a title bar as follows:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- 1. Load platform.js for polyfill support. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Use an HTML Import to bring in the element. -->
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="big-picture.html">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body unresolved touch-action="auto">
<core-drawer-panel>
<div drawer id="drawer">
<core-menu id="drawermenu">
<paper-item class="menulink">Home</paper-item>
<paper-item class="menulink">Gallery</paper-item>
<paper-item class="menulink">Calendar</paper-item>
<paper-item class="menulink">Contact</paper-item>
</core-menu>
</div>
<div main>
<core-header-panel mode="seamed">
<core-toolbar>
<core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
<h1 id="title">Test</h1>
</core-toolbar>
<div id="pagecontent">
<big-picture></big-picture>
</div>
</core-header-panel>
</div>
</core-drawer-panel>
</body>
</html>
I'm trying to create a picture element that will be shown directly beneath the title bar,
I want the picture to fill up the remaining screen space but also have a certain height. Later I want these pictures to change automatically. None of my styling seems to work though, my picture element looks like this:
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="big-picture">
<template>
<style>
:host
{
height: 100px;
}
#crop
{
position: relative;
}
#mainpictop
{
position: absolute;
}
#mainpicbottom
{
position: absolute;
}
</style>
<div id="crop">
<img id="mainpictop" src="img/main/1.jpg"></img>
<img id="mainpicbottom" src="img/main/2.jpg"></img>
</div>
</template>
<script>
Polymer({});
</script>
</polymer-element>
A common problem is not setting up your page layout. Container elements generally need to be sized explicitly. I would suggest something like this:
<body fullbleed vertical layout unresolved touch-action="auto">
<core-drawer-panel flex>
fullbleed makes the body fit the viewport with no margin. vertical layout gives body flex-box layout ability. flex on the core-drawer-panel will cause it to fit to the body.
Additionally, all custom elements are display: inline by default (this is a DOM/CSS rule, not Polymer's). To set a size on an element, you need to make it block or inline-block.
:host
{
display: block;
height: 100px;
}