learning Polymer's layout, the paper-icon-button is not visible in the App-toolbar area, code is `
<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="paper-styles/paper-styles.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div title>Spork</div>
<paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>
</body>`
2, any idea why? Thanks,
the correct out should have been:
[app-toolbar with buttons][3]
BuddyG
You are missing the import for iron-icons which contains the search and menu icon. Including this should solve your issue <link rel="import" href="iron-icons/iron-icons.html">
<base href="https://polygit.org/components/">
<link rel="import" href="app-layout/demo/sample-content.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-styles/paper-styles.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div title>Spork</div>
<paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>
</body>
Related
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<div class="sidebar-nav">
<ul>
<li>This is some test text</li>
</ul>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
That is my html
html, body {
width: 100%;
height: 100%;
}
#sidebar-wrapper {
position: absolute;
width: 200px;
height: 100%;
background-color: black;
}
.sidebar-nav ul li a {
display: block;
color: white;
font-family: "Open Sans", serif;
font-size: 20px;
}
That's my css
Applying the Open Sans font family to the a element changes the font but it looks bold, when it should be thinner.
I've tried other fonts as well and they all look bolder.
How it should be:
How it is (Here it looks more bubbly):
Update: https://jsfiddle.net/xzw2ssz5/
Try to paste the following code in your custom CSS file.
body {
font-family: "Open Sans" !important;
}
And make sure that your fonts are properly being loaded by navigating to the Network tab in developer tools and then selecting the checking the fonts.
If you don't want to apply the fonts on the entire document then try putting !important in front of your font-family rule like so:
.sidebar-nav ul li a {
display: block;
color: white;
font-family: "Open Sans", serif !important;
font-size: 20px;
}
Let me know if that works for you.
Update
okay, I've got it up and running. Basically, you haven't selected any font-weight from the google fonts library. Replace your <link> with this one:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
Keep the font-weights values which you want and remove all others. That's why you were not able to change its font-weight. Hope that helps now.
Hi I think the problem is the order you're calling the your css resources
move the Open Sans import on top of your css stylesheet try this or just #import the css font directly into your stylesheet.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="style.css"
type="text/css">
How do I align my paper-tabs to the left? I tried using margin-left: 0; but that did not work. When I inspected the HTML file from the browser there seems to be a paper-icon button next to the tabs, which I did not add. It's there probably because of the scrollable attribute of the paper tab so how do I move it to the left without compromising the scrollable attribute of the paper-tabs?
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Website metadata-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<!--Polymer elements-->
<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/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--Main stylesheet-->
<link rel="stylesheet" href="app.css">
<!--Style for polymer elements-->
<style is="custom-style">
app-header{
background: #FFFFFF;
}
paper-toolbar{
--paper-toolbar-background: #ffffff;
color: #000000;
}
paper-tabs{
-webkit-font-smoothing: antialiased;
width: 100%;
text-transform: none;
margin-bottom: 0;
color: #757575;
--paper-tabs-selection-bar-color: #1db886;
}
paper-tab{
--paper-tab-ink: #ffffff;
font-weight: 400;
}
paper-tab.iron-selected{
color: #1db886;
}
#app-title{
font-size: xx-large;
font-weight: 200;
margin: 0;
}
</style>
</head>
<body>
<!--App header-->
<app-header reveals shadow>
<paper-toolbar>
<div class="title" id="app-title">Test</div>
</paper-toolbar>
<paper-tabs selected="0" scrollable>
<paper-tab>Home</paper-tab>
<paper-tab>Test</paper-tab>
<paper-tab>Test</paper-tab>
<paper-tab>Test</paper-tab>
<paper-tab>Test</paper-tab>
</paper-tabs>
</app-header>
</body>
</html>
Giving a snippet of some of the css would help :P Try this, tho!
float:left;
Please post a JSFiddle (or JSBin, etc...) that vertically centers the "Button" text inside the <paper-button> in this JSFiddle by using CSS in the <head> section of the main <html> document (i.e., light DOM) only (i.e., not by using CSS inside the custom element — i.e., shadow DOM).
I want it to look like this JSFiddle.
Modify this using light DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
<style>
paper-button {
--paper-button: {
#apply(--layout-vertical);
#apply(--layout-center-center);
};
background: black;
color: white;
height: 100%;
border-radius: 0;
border-left: 1px solid white;
margin-right: -16px;
}
</style>
</head>
<body class="fullbleed layout vertical">
<paper-header-panel>
<paper-toolbar>
<span>Header</span>
<span class="flex"></span>
<paper-button>Button</paper-button>
</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
<dom-module id="x-element">
<template>
<style></style>
<paper-button>Button</paper-button>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
Example of target output (using shadow DOM CSS)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
:host {
height: 100%;
}
paper-button {
--paper-button: {
#apply(--layout-vertical);
#apply(--layout-center-center);
};
background: black;
color: white;
height: 100%;
border-radius: 0;
border-left: 1px solid white;
margin-right: -16px;
}
</style>
<paper-header-panel>
<paper-toolbar>
<span>Header</span>
<span class="flex"></span>
<paper-button>Button</paper-button>
</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</html>
You just have to add the attribute :
<style is="custom-style">
to your style definition.
From accepted answer:
Link to JSFiddle
http://jsfiddle.net/pkx736up/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
<style is="custom-style">
paper-button {
--paper-button: {
#apply(--layout-vertical);
#apply(--layout-center-center);
};
background: black;
color: white;
height: 100%;
border-radius: 0;
border-left: 1px solid white;
margin-right: -16px;
}
</style>
</head>
<body class="fullbleed layout vertical">
<paper-header-panel>
<paper-toolbar>
<span>Header</span>
<span class="flex"></span>
<paper-button>Button</paper-button>
</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
<dom-module id="x-element">
<template>
<style></style>
<paper-button>Button</paper-button>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
I need a template to make bug report demo's
This is what I have so far, but i can't find the paper and iron collection like in 0.5
<!DOCTYPE html>
<html>
<head>
<title>Polymer 1.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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">
<script src="https://www.polymer-project.org/1.0/webcomponents.min.js"></script>
<!-- <link rel="import" href="https://rawgit.com/Polymer/polymer/v1.0.3/polymer.html"> -->
<link rel="import" href="http://crossorigin.me/https://elements.polymer-project.org/bower_components/iron-elements/iron-elements.html">
<link rel="import" href="http://crossorigin.me/https://elements.polymer-project.org/bower_components/paper-elements/paper-elements.html">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&lang=en' type='text/css'>
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Source+Code+Pro' type='text/css'>
<style>
body {
font-family: 'RobotoDraft', sans-serif;
}
:unresolved {
display: flex;
justify-content: flex-start;
background: rgba(255, 255, 255, 0.5);
border: 2px dashed #ccc;
border-radius: 5px;
box-sizing: border-box;
}
:unresolved:after {
padding: 15px;
content: 'loading...';
color: #ccc;
}
p-test {
border: 2px solid red;
border-radius: 5px;
box-sizing: border-box;
}
</style>
</head>
<body class="fullbleed layout vertical">
<dom-module id="p-test">
<template>
<p>test</p>
</template>
</dom-module>
<script>
Polymer({
is: 'p-test',
ready: function() {}
})
</script>
<p-test class="fit layout vertical"></p-test>
</body>
</html>
I seem to be able to do this without all the crossorigin stuff for imports. This snippet works for me:
html, body {
height: 100%;
}
body {
overflow: hidden;
margin: 0;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-button {
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta description="Polymer 1.0 Template">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-toast/paper-toast.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<paper-button raised onclick="document.querySelector('#toast1').show()">
Discard Draft
</paper-button>
<paper-button raised onclick="document.querySelector('#toast2').show()">
Get Messages
</paper-button>
<paper-toast id="toast1" text="Your draft has been discarded."></paper-toast>
<paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
<span role="button" tabindex="0" style="color: #eeff41;margin: 10px"
onclick="console.log('RETRY')">
Retry
</span>
</paper-toast>
</body>
</html>
I have a new Polymer 0.9 project and want to use paper-header-panel. Everything works except the special modes of paper-header-panel, like waterfall.
What am I doing wrong?
I've tried setting the flex option on the body and paper-header-panel as suggested in the documentation, and the css settings but nothing works, unless I set paper-header-panel to a fixed height.
<html lang="">
<head>
<!--Polymer-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.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">
<!-- Page styles -->
<style>
body{
height: 100%;
width:100%;
margin:0px;
padding: 0px;
}
.contentHolder {
height: 2000px;
}
paper-header-panel {
height:100%;
#apply(--shadow-elevation-2dp);
}
paper-toolbar {
height: 60px;
font-size: 25px;
line-height: 60px;
font-weight: 300;
padding: 0 10px;
color: #FFF;
transition: height 0.2s;
}
paper-toolbar.medium-tall{
line-height: 60px;
font-size: 35px !important;
}
</style>
</head>
<body fullbleed layout vertical>
<paper-header-panel flex mode="waterfall-tall" tall-class="medium-tall">
<paper-toolbar class="toolbar">
<div class="flex">Title</div>
<iron-icon icon="search"></iron-icon>
<iron-icon icon="menu"></iron-icon>
<div class="middle"></div>
</paper-toolbar>
<div class="contentHolder"></div>
</paper-header-panel>
</body>
</html>
paper-header-panel
paper-header-panel contains a header section and a content panel section.
Important: The paper-header-panel will not display if its parent does not have a height.
...
https://github.com/PolymerElements/paper-header-panel#paper-header-panel
From your question
...unless I set paper-header-panel to a fixed height.
What this means is that the fixed height is required. However you can use the em css units to set the height relative to the font-size. 1em refers to 100% of the current font's height