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">
Related
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>
I want to create my own <menu-item> element to remove some boilerplate code. I wrapped <paper-icon-item> in my own element in the following way:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-item/paper-icon-item.html">
<dom-module id="menu-item">
<template>
<paper-icon-item>
<iron-icon icon="[[icon]]" item-icon></iron-icon>
<content></content>
</paper-icon-item>
</template>
</dom-module>
<script>
Polymer({
is: "menu-item",
properties: {
icon: { type: String }
}
});
</script>
The problem when using my <menu-item> is, however, that it behaves differently as to writing the template code directly in the HTML file. I suspect that the item is missing some interaction capabilities with the menu to function properly, but I can't figure it out. I tried using behaviors Polymer.IronControlState and Polymer.IronButtonState just like the paper item does, but no luck.
What am I missing to make my <menu-item> behave like a regular <paper-item>?
Answer
Following code is largely copied from the paper-icon-item.html.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-behaviors/iron-control-state.html">
<link rel="import" href="bower_components/iron-behaviors/iron-button-state.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/default-theme.html">
<link rel="import" href="bower_components/paper-item/paper-item-behavior.html">
<link rel="import" href="bower_components/paper-item/paper-item-shared-styles.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<dom-module id="menu-item">
<template>
<style include="paper-item-shared-styles"></style>
<style>
:host {
#apply(--layout-horizontal);
#apply(--layout-center);
#apply(--paper-font-subhead);
#apply(--paper-item);
#apply(--paper-icon-item);
}
.content-icon {
width: var(--paper-item-icon-width, 56px);
#apply(--layout-horizontal);
#apply(--layout-center);
}
</style>
<div id="contentIcon" class="content-icon">
<iron-icon icon="{{ico}}" item-icon></iron-icon>
</div>
<content></content>
</template>
<script>
Polymer({
is: 'menu-item',
properties: {
ico: {
type: String,
value: "icons:stars"
}
},
behaviors: [
Polymer.PaperItemBehavior
]
});
</script>
</dom-module>
On Extending Elements
I think the simplest way of changing the template of an element is by just copying it, modifying the template and its name. This approach is not without problems, it becomes very difficult to keep the new element up to date with changes in the original one. I am really craving for a better solution!.
On Using Behaviors
You should try to avoid consuming both an element and a behavior used by that element at the same time, you might get into trouble. For example the reason your menu-item doesn't look proper is because the paper-item inside it doesn't acquire the attribute focused. The paper-item doesn't acquire that particular attribute is because its parent element menu-item has the focus, menu-item has the focus because both menu-item and paper-item have tabindex="0" set on them. Why do both these elements have it set on them?, it is because of Polymer.IronControlStateBehavior in both of them.
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
I've been working with MeteorJS and Polymer integration. I've done quite some code but I'm very poor at Design especially with CSS. Any idea how I can remove the fade in the area boxed in Red? I can change the background color, but I don't know how to remove the fading.
I'm using the following code for the Meteor Template:
<template name="default_template">
<head>
<title>agus</title>
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-input/paper-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
</head>
<body>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="Profile" id="mnuItemProfile"></core-item>
<core-item label="Dashboard" id="mnuItemDashboard"></core-item>
</core-menu>
</core-header-panel>
<span tool>Agus System</span>
<div class="content">
{{> yield}}
</div>
</core-scaffold>
</body>
</template>
My css only changes colors. Any recommendations (in css) on removing the fade?
Use the "seamed" mode for core-header-panel as in the core-header-panel demo:
<core-header-panel mode="seamed"></core-header-panel>
You can set box-shadow to none, on the element you are changing the background color, so
box-shadow: none;
Hope this help.
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;
}