I played around with polymer again, so I created a basic page with the help of some great tutorials on youtube but I always get this issue when opening the drawer.
As you can see the menu icon and the "Polymer" title is from the bottom toolbar. Maybe somebody knows how to fix it.
Thanks :)
<body fullbleed layout vertical>
<!-- Drawer -->
<paper-drawer-panel>
<!-- Inside the Drawer -->
<div drawer>
<!-- Drawer toolbar-->
<paper-toolbar class="tall">
<span>Menu</span>
</paper-toolbar>
</div>
<!-- Main Content -->
<div main class="main">
<!-- Main toolbar -->
<paper-toolbar>
<paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
<span class="flex">Polymer</span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</div>
</paper-drawer-panel>
</body>
I have slightly modified your code. Put this in your body:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar class="tall">
<div>Menu</div>
</paper-toolbar>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
<div class="flex">Polymer</div>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
Related
Polymer app drawer is working in mobile screens but not toggling in big screens.
<app-drawer-layout fullbleed force-narrow>
<app-drawer id="drawer" slot="drawer" swipe-open>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header class="mainHeader" fixed slot="header" reveals effects="blend-background waterfall">
<app-toolbar>
<div main-title>
Title
</div>
<span class="username">USER</span>
<paper-button class="logout">Signout</paper-button>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
Any idea why this is not working?
You don't have the menu icon to toggle the drawer. Add this to your header:
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
The complete code would be the following:
<app-drawer-layout fullbleed force-narrow>
<app-drawer id="drawer" slot="drawer" swipe-open>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header class="mainHeader" fixed slot="header" reveals effects="blend-background waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>
Title
</div>
<span class="username">USER</span>
<paper-button class="logout">Signout</paper-button>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
I am trying to build a MDL-based header, which includes drawer and tabs. The problem is that these two components come on different lines, while I want them to be on the same line.
1
http://codepen.io/anon/pen/KVWppQ
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
</div>
<!-- Tabs -->
<nav class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</nav>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
Thanks in advance!
When trying to use the example of the menu layout with Fixed Tabs, with Googl'es MDL: http://www.getmdl.io/components/index.html#layout-section/layout .
The "title", next to the hamburger menu, isnt aligned horizontally, like it is in the example.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
http://codepen.io/anon/pen/EPaBzW
I tried to put a <google-chart> into polymer <paper-drawer-panel> but the chart does not appear.
I don't know what i'm doing wrong because if i try to put the chart without the polymer <paper-drawer-panel> the chart appear.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Google Charts in Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="import" href="bower_components/google-chart/google-chart.html">
</head>
<body unresolved class="fullbleed layout vertical">
<template>
<paper-drawer-panel id="paperDrawerPanel" force-narrow>
<paper-scroll-header-panel drawer fixed>
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title">Menu</span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a href="../#!/home">
<iron-icon icon="home"></iron-icon>
<span>Inicio</span>
</a>
<a href="../#!/menu1">
<iron-icon icon="shopping-basket"></iron-icon>
<span>Menu 1</span>
</a>
<a href="../#!/menu2">
<iron-icon icon="shopping-cart"></iron-icon>
<span>Menu 2</span>
</a>
<a href="../#!/menu-3">
<iron-icon icon="view-quilt"></iron-icon>
<span>Menu 3</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="account-circle"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Polymer Charts</div>
</div>
</paper-toolbar>
<div id="demo">
<h1>Material Design</h1>
<google-chart
type='pie'
options='{"title": "Distribution of days in 2001H1"}'
cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
</google-chart>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
</body>
</html>
I tried to put a <google-chart> into polymer <paper-drawer-panel> but the chart does not appear.
I don't know what i'm doing wrong because if i try to put the chart without the polymer <paper-drawer-panel> the chart appear.
I'm using the paper-dropdown-menu in several places in a polymer app. It works great in the topmost file (index.php). But somehow it doesn't work in all custom elements. I must be doing something wrong as I can't find anyone else online complaining about this issue. Could someone take a look at this element and tell me if it's correct?
<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-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-dropdown/iron-dropdown.html">
<link rel="import" href="../../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../users-data/users-data.html">
<link rel="import" href="../../styles/shared-styles.html">
<dom-module id="account-user-add">
<template>
<style include="shared-styles">
:host {
display: block;
}
*, ::after, ::before {
box-sizing: border-box;
}
</style>
<users-data users="{{users}}"></users-data>
<paper-card>
<div class="card-content">
<!-- Contact photo area -->
<div class="row padded">
<div class="col s4 m3 l2">
<img class="circle responsive-img" src="[[user.avatar]]">
</div>
<div class="col s8 m9 l10 padded">
<h3>
<span>[[user.firstName]]</span>
<span>[[user.lastName]]</span>
</h3>
<div class="layout horizontal">
<span>[[user.group]]</span> ยท <span>Active</span>
</div>
</div>
</div>
<!-- Contact form -->
<div id="contactForm">
<!-- Group -->
<div class="formRow layout horizontal">
<paper-dropdown-menu class="flex" label="Permission level">
<paper-menu attr-for-selected="value" selected="{{user.group}}" class="dropdown-content">
<paper-item value="Admin">Admin</paper-item>
<paper-item value="User">User</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
<!-- Name -->
<div class="formRow layout horizontal">
<paper-input value="{{user.firstName}}" class="item item-input flex" label="First name"></paper-input>
<paper-input value="{{user.lastName}}" class="item item-input flex" label="Last name"></paper-input>
</div>
<!-- Avatar -->
<div class="formRow layout horizontal">
<paper-input value="{{user.avatar}}" class="item item-input flex" label="Avatar"></paper-input>
</div>
<!-- Phone -->
<div class="formRow layout horizontal">
<paper-input value="{{user.telephone}}" class="item item-input flex" label="Phone"></paper-input>
</div>
<!-- Email -->
<div class="formRow layout horizontal">
<paper-input value="{{user.email}}" class="item item-input flex" label="Email"></paper-input>
</div>
<!-- Address -->
<div class="formRow layout horizontal">
<paper-input value="{{user.address}}" class="item item-input flex" label="Address"></paper-input>
</div>
<!-- Save -->
<div class="formRow buttons">
<paper-button on-tap="_saveUser" raised><iron-icon icon="save"></iron-icon> Save</paper-button>
</div>
</div>
</div>
</paper-card>
</template>
<script>
(function() {
//'use strict';
Polymer({
is: 'account-user-add',
properties: {
users: {
type: Array
},
user: {
value: {},
type: Object
}
},
_saveUser: function (event) {
this.push('users', this.user);
this.user = {};
page('/account-users');
}
});
})();
</script>
</dom-module>
It seems to work when you isolate the paper-dropdown-menu in a simple file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
</head>
<body>
<dom-module id="account-user-add">
<template>
<paper-card>
<div class="formRow layout horizontal">
<paper-dropdown-menu class="flex" label="Permission level">
<paper-menu attr-for-selected="value" class="dropdown-content">
<paper-item value="Admin">Admin</paper-item>
<paper-item value="User">User</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
</paper-card>
</template>
<script>
Polymer( {
is: "account-user-add"
} )
</script>
</dom-module>
<account-user-add>
</account-user-add>
</body>
</html>
That's odd. It seems to work in This example
I did nothing, but posting your code and add element-party that every import works. Maybe you could check those?