I have a Polymer app-header element in my master page.
I would like to transition from an image to a solid color when scrolling down. To do so, according to the documentation, I need to add a --app-header-background-rear-layer custom property to my app--header in the stylesheet.
Here is my Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="DarkSoulsMaster.Master.cs" Inherits="DarkSouls.DarkSoulsMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css"/>
<script>
Polymer = {
lazyRegister: true,
useNativeCSSProperties: true
};
</script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html"/>
<link rel="import" href="bower_components/app-layout/app-header/app-header.html"/>
<link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"/>
<link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html"/>
<link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html"/>
<link rel="import" href="bower_components/app-layout/app-drawer-layout/app-drawer-layout.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-item/paper-item.html" />
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" ></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form" runat="server">
<div style="overflow: auto;">
<app-header-layout>
<app-header condenses shadow fixed effects="resize-title blend-background">
<app-toolbar>
<div style="color: white; font-size: 36px; margin:auto" class="title-main" condensed-title>Dark Souls</div>
<paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
</app-toolbar>
<app-toolbar>
<div style="transform-origin: top, center; color: white;" class="title-main" main-title>Dark Souls</div>
</app-toolbar>
</app-header>
<app-drawer-layout>
<app-drawer id="drawer" align="right" persistent="false">
<div style="height: 100%; background-color: white; padding-top:256px;">
<paper-icon-item>
<iron-icon icon="home" item-icon></iron-icon>
דף הבית
</paper-icon-item>
</div>
</app-drawer>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</app-drawer-layout>
</app-header-layout>
</div>
</form>
</body>
</html>
And here is my app-header in the css file:
app-header {
background-position-x: 60%;
background-position-y: 15%;
height: 256px;
background-color: #263238;
--app-header-background-rear-layer: {
background: linear-gradient(rgba(38, 50, 56, 0.5), rgba(38, 50, 56, 0.5)), url(../res/header.jpg); <!--This is the image -->
};
}
The problem is that the image doesn't appear. Only a solid blue-grey header is seen. I am pretty sure the problem is in the custom property: --app-header-background-rear-layer because it is the only thing that doesn't change the appearance of the website.
Polymer custom CSS properties like --app-header-background-rear-layer should be used in a custom style element <style is="custom-style">.
So you should use an inline <style is="custom-style"> element, or import it in a <link rel="import" href="style.css"> element.
Related
I'm currently using the app-layout elements (Version 0.10.4), specifically app-toolbar.
When creating a div with the "main-title" attribute tied to it, it does not "work." I'm not exactly sure, if it might be what I imported.
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/app-layout/app-layout.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
or it could possibly be that I'm using app-toolbar wrong.
<body>
<app-header-layout>
<app-header effects="waterfall" reveals>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
</app-toolbar>
</app-header>
<main>
</main>
</app-header-layout>
</body>
All feedback is appreciated, thanks!
Your imports look correct to me. Given that the docs don't fully describe what main-title does, it's possible that you're assuming the wrong behavior for the attribute. Note that main-title expands the title's width across the toolbar. See the demos below.
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="app-layout/app-layout.html">
</head>
<body>
<style is="custom-style">
app-toolbar {
background-color: #4285f4;
color: white;
margin-bottom: 10px;
}
.my-title {
border: solid 1px red;
}
</style>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title" main-title>With <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title">Without <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
</body>
I'm new to polymer and using version 1.0, and I'm having same problems with the paper dropdown menu button.
Every time I click on it, its height gets smaller.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.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-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #EFFBFB;
font-family: 'RobotoDraft', sans-serif;
}
</style>
</head>
<body>
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="app-name">Dashbord</div>
<span class="flex"></span>
<paper-menu-button horizontal-align="right" horizontal-offset="20" vertical-align="top" vertical-offset="50" height="100%">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<div class="horizontal-section-container">
<div class="horizontal-section">
<paper-menu>
<paper-item><iron-icon icon="inbox" item-icon></iron-icon> Inbox</paper-item>
<paper-item><iron-icon icon="send" item-icon></iron-icon> Outbox</paper-item>
<paper-item><iron-icon icon="delete" item-icon></iron-icon> Trash</paper-item>
<paper-item><iron-icon icon="report" item-icon></iron-icon> Spam</paper-item>
</paper-menu>
</div>
</div>
</body>
Another thing is that the demo hse the same problem to.
Do I need to reinstall somthing? chang my imports?
Thanks.
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>
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>
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;
}