Polymer paper-drawer-panel Responsive design - html

In my code the paper drawer panel collapses while re sizing the browser but when i try it in mobile phone it do not collapses.
<!DOCTYPE html>
<html>
<head>
<title>PolyPolymer</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements.html">
</head>
<body fullblead layout vertical fit>
<paper-drawer-panel responsive-width="800px">
<paper-header-panel flex drawer>
<paper-toolbar>
<div class="title middle">Heading</div>
</paper-toolbar>
<div class="bottom row fit bottom">
</div>
</paper-header-panel>
<paper-header-panel flex main>
<paper-toolbar>
<paper-ripple center></paper-ripple>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div flex class="indent title">Heading</div>
</paper-toolbar>
<div>
page content
</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
I am using polymer 1.0

This is something i was struggling with for a while , what worked for me was
putting this snippet in the head.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I hope it works for you like it did for me :)

Related

No Polymer/Paper elements will show up

Im starting a site using Polymer and the Paper Elements designed for it. I have install the components using bower and it seems i have everything in the right place. here is my code:
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
</head>
<body fullbleed unresolved>
<template is="auto-binding">
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar class="tall">
</core-toolbar>
</core-header-panel>
<div tool layout horizontal flex>
<span flex>Toolbar Text</span>
<core-icon icon="account-circle"></core-icon>
<span>7</span>
</div>
<div flex>
<div class="send_message" layout horizontal>
<paper-input flex label="Enter Text..." id="input" value="{{input}}"></paper-input>
<paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab>
</div>
</div>
</core-scaffold>
</template>
</body>
</html>
Nothing show up once i load the webpage tho. If i take out the template tag i can see the text in my toolbar, but still none of the elements render. Any help is appreciated, thanks in advance!
It looks like you're using an old version of Polymer (< 1.0) based on your usage of core-* elements (replaced by iron-*) and auto-binding (replaced by dom-bind). Polymer docs have a migration guide that could help you upgrade, but it might be easier to start from scratch, using Polymer Starter Kit (which has the latest and greatest).

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

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 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

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;
}