So, I am aware the web components, Shadow DOM and such is only implememted natively in Chrome today.
For support in Firefox, Polyfill is needed. According to the website, Polymer has polyfill support in Firefox:
https://www.polymer-project.org/resources/compatibility.html
but when I have made a very simple page, it looks completely screwed up i Firefox. But, if I try the Polymer website in Firefox, it works there without any obvious problems.
Test URL: http://misc.snapcode.se/polymer/
Here is how my test-site looks in Chrome:
and in Firefox:
The code can be seen below.
But they say that Firefox has Polyfill support, and it supports CSS, so why is the layout/design so screwed up?
How come they get their own site to work in Firefox, but a super-simple site I build is screwed up?
If I try out the paper-dropdown in FF, it works fine on their demo site, but if I use the paper-dropdown on my own site, constructed the same way as described on the polymer website, its completely screwed up. Why?
What am I missing?
EDIT 1
I found out that to get the header panel "right" in Firefox, I have to remove the CSS in index.php for the div {...}:
That seems to me like the Shadow DOM isnt working correctly, even though I have imported webcomponents.js, which should be the Polyfill needed.
EDIT 2
I have looked in Firefox using Firebug and I can see the following:
As I can see it, webcomponents.min.js is imported (I tested different js files), and there is some stuff talking about ShadowDOMPolyfill. So, it is even weirder now I think.
EDIT 3
I debugged Firefox using Firebug, image below. As I see it, ShadowDOM using Polyfill is indeed detected and used. Do you agree? =)
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEO</title>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<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-icons/core-icons.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/my-components/logout-button/logout-button.html">
<link rel="import" href="/my-components/assignment-card/assignment-card.html">
<style>
html, body {
height: 100%;
margin: 0px;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
echo "Not logged in";
}
?>
<core-header-panel flex layout>
<core-toolbar>
<div flex>LEO 1</div>
<div>
<logout-button></logout-button>
</div>
</core-toolbar>
<div id="id1" horizontal layout >
<assignment-card></assignment-card>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>
assignment-card.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-dropdown/core-dropdown.html">
<link rel="import" href="/components/core-dropdown-menu/core-dropdown-menu.html">
<link rel="import" href="/components/paper-item/paper-item.html">
<link rel="import" href="/components/paper-menu/paper-menu.html">
<link rel="import" href="/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<link rel="import" href="/components/core-tooltip/core-tooltip.html">
<polymer-element name="assignment-card">
<template>
<style>
input {
padding: 10px;
font-family: 'RobotoDraft', sans-serif;
font-size: 16px;
margin: 0px;
}
core-icon[icon="error"] {
width: 40px;
height: 40px;
color: red;
}
core-icon[icon="perm-identity"] {
width: 40px;
height: 40px;
}
core-icon[icon="lock-outline"] {
width: 40px;
height: 40px;
}
core-icon[icon="arrow-forward"] {
color: #e4e4e4;
}
core-icon {
color: #808080;
}
paper-button {
background-color: #6fd177;
margin: 0px;
}
core-field {
margin-bottom: 10px;
}
div[id="container"] {
background: #C0C0C0;
padding: 5px;
}
div
{
margin: 10px;
font-size: 12px;
}
</style>
<div id="container" layout vertical >
<div layout horizontal>
<core-label >Starttid: 14:13</core-label>
<core-label flex></core-label>
<core-label >Uppdrags-id: 13213241</core-label>
</div>
<div><core-label>Kertin Karlsson,</core-label></div>
<div layout horizontal relative>
<paper-dropdown-menu raised label="-Välj" style='background: #fff; padding: 5px; margin: 0px; margin-right: 15px; ' flex>
<paper-dropdown class="dropdown" layered="true">
<core-menu class="menu">
<template repeat="{{assistant in assistants}}">
<paper-item name="{{assistant.id}}">{{assistant.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>Tilldela</paper-button>
</div>
</div>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/relay.php"
method="post"
params='{{json}}'
handleAs="json"
on-core-response="{{handleResponse}}">
</core-ajax>
</template>
<script>
Polymer('assignment-card', {
ready: function() {
this.assistants = [
{id: 1, name: 'Kalle'},
{id: 2, name: 'Ted'},
{id: 3, name: 'Micke'},
{id: 4, name: 'Bengt'},
];
}
});
</script>
</polymer-element>
logout-button.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<polymer-element name="logout-button">
<template>
<style>
paper-button
{
background: #DF0101;
color: white;
}
</style>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/logout.php"
on-core-response="{{handleResponse}}">
</core-ajax>
<paper-button raised id="btnLogout" on-click="{{onLogoutClicked}}">Logga ut
<core-icon icon="highlight-remove"></core-icon>
</paper-button>
</template>
<script>
Polymer('logout-button', {
onLogoutClicked: function()
{
this.$.coreAjax1.go();
},
handleResponse: function(e)
{
document.location.href = '/index.php';
}
});
</script>
</polymer-element>
The problem persist because firefox does not create shadow DOM but it displays shadow content directly. So the following snippet screws the overall view:
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
If you remove that code and add some specific code then it will work. The snippet for index.php with specific code is given below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEO</title>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<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-icons/core-icons.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/my-components/logout-button/logout-button.html">
<link rel="import" href="/my-components/assignment-card/assignment-card.html">
<style>
html, body {
height: 100%;
margin: 0px;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
assignment-card,
logout-button{
margin: 10px;
}
logout-button paper-button{
top: 3px;
}
</style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
echo "Not logged in";
}
?>
<core-header-panel flex layout>
<core-toolbar>
<div flex>LEO 1</div>
<div>
<logout-button></logout-button>
</div>
</core-toolbar>
<div id="id1" horizontal layout >
<assignment-card></assignment-card>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>
Related
I have a custom class:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<div class="circle">{{volts}}</div>
<div class="circle">{{time}}</div>
<div class="circle">{{temp}}</div>
</template>
<script>
//etc
</script>
</dom-module>
In the shared-styles.html file I have the definition for the circle class:
.circle {
display: inline-block;
width: 64px;
height: 64px;
text-align: center;
color: #555;
border-radius: 50%;
background: #ddd;
font-size: 30px;
line-height: 64px;
}
However, the class doesn't load. I don't get the circle around the text, nor anything else defined there. What am I missing? Can I not use classes in templates? Do I need to import it somehow else?
I'm pretty sure you want something like this:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<style include="shared-styles">
/* any extra styles can go here */
</style>
<div class="circle">{{volts}}</div>
<div class="circle">{{time}}</div>
<div class="circle">{{temp}}</div>
</template>
<script>
//etc
</script>
</dom-module>
Note the <style> block.
Unable to style an element using Shadow DOM with Polymer 1.x or 2.x. Consider the following custom element in Polymer 2.0:
<link rel="import" href="../polymer/polymer.html">
<!--
`semantic-ui-button`
#demo demo/index.html
-->
<dom-module id="polymer-button">
<template>
<div class$="button {{size}}">{{label}}</div>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() {
return 'polymer-button';
}
static get properties() {
return {
label: {
type: String,
value: 'polymer-element'
},
size: { type: String }
};
}
}
window.customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
in the demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer-element demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../polymer-element.html">
<style is="custom-style" include="demo-pages-shared-styles"></style>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.button {
background: #ccc;
border-radius: 4px;
color: #444;
}
.button.big {
font-size: 1rem;
padding: 6px;
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic polymer-element demo</h3>
<demo-snippet>
<template>
<polymer-button label="Demo"></polymer-button>
</template>
</demo-snippet>
</div>
</body>
</html>
The styles defined in the demo for .button and .button.big are not applied to the shadow element; however, in Polymer 1.x the styles are applied if we use ShadyDOM:
<link rel="import" href="../polymer/polymer.html">
<!--
`polymer-button`
#demo demo/index.html
-->
<dom-module id="polymer-button">
<template>
<div class$="button {{size}}">{{label}}</div>
</template>
<script>
Polymer({
is: 'polymer-button',
properties: {
label: { type: String }
},
});
</script>
</dom-module>
is there a way to select/style these inner elements using external styles?
Below is a visual representation of what I said above in order of appearance:
Polymer 1.x using Shadow DOM
Polymer 1.x using ShadyDOM
Polymer 2.x
To enable styling points, use CSS variables/mixins.
Add a <style> tag to your element's template:
<dom-module id="polymer-button">
<template>
<style>
.button {
#apply --my-button-mixin;
}
.button.big {
#apply --my-button-big-mixin;
}
</style>
...
</template>
</dom-module>
Specify the mixin in a container element:
<dom-module id="x-foo">
<template>
<style>
polymer-button {
--my-button-mixin: {
background: red;
color: white;
};
}
</style>
<polymer-button label="Red button"></polymer-button>
</template>
</dom-module>
...or in index.html:
<body>
<custom-style>
<style>
polymer-button {
--my-button-mixin: {
background: red;
color: white;
};
}
</style>
</custom-style>
<polymer-button label="Red button"></polymer-button>
</body>
codepen (Polymer 1)
codepen (Polymer 2)
Alternately, you can add a <style> element with an #import url rule inside your custom element <template> that will import an external stylesheet:
<template>
<style>
#import url( external.css )
</style>
<div class$="button {{size}}">{{label}}</div>
</template>
In your CSS stylesheet (example: external.css) you can define standard CSS:
.button {
background: #ccc;
border-radius: 4px;
color: #444;
}
.button.big {
font-size: 1rem;
padding: 6px;
}
I am currently learning polymer and I am struggling with one of the example on the Polymer website. The example is this one : https://www.polymer-project.org/1.0/toolbox/app-layout#condensing-header.
My index.html is the same as the one in the Sample toolbars section, I have just replaced the body with the one in the Condensing Header.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<!-- import latest release version of all components from polygit -->
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.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-header id="header" effects="waterfall" fixed condenses>
<app-toolbar>
<div title>Left</div>
<div title>Title</div>
<div title>Right</div>
</app-toolbar>
<paper-tabs selected="0" primary>
<paper-tab>Food</paper-tab>
<paper-tab>Drink</paper-tab>
<paper-tab>Life</paper-tab>
</paper-tabs>
</app-header>
</body>
</html>
To make things easier: Plunker
In the Polymer tutorial, Left / Title / Right are resp. on the left, center and right of the header but in my version, they are all on the left. Any idea why ?
Thanks
I'm having trouble understanding why I can't pass a custom CSS property for a background image to a polymer element. Using CCS properties for styling Polymer elements is explained here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details and this works for some elements (example the grey background in my code below).
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, white);
background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
/* THIS WORKS
background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
*/
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
Polymer({ is: 'my-element'});
</script>
</dom-module>
<my-element></my-element>
</body>
I have two question:
Why isn't this working?
What is the best way to solve this?
Code is here: http://jsbin.com/yuxobexepe/edit?html,output
Thanks!
Paul
You are mixing the definition/usage of CSS property. Here is a working JSBIN of your problem:
<html>
<head>
<base href="http://polygit.org/polymer/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, blue);
background-image: var(--container-background, "default.png");
--container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({ is: 'my-element'});
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
background-image is using the value of --container-background if it exists, or default to what you give. Then you define separately the --container-background property, usually, outside of the component itself.
I'm trying to change a text link on my site to an image using css...need some help please. Below you will see my css - I would like to change my favorite text http://cl.ly/0S2j28082G2W423Y2T00 to an image.
a.upb_add_bookmark {
background: none repeat scroll 0 0 #E8BD61;
border-color: #C79324;
border-style: solid;
border-width: 1px;
color: black;
padding: 2px 5px;
text-decoration: none;
}
Your background property will need to be set to include the image. You will also need to set the <a> element as an inline-block so that you can declare a height and width for it.
a.upb_add_bookmark {
background: url('favorites-image.jpg') no-repeat;
display: inline-block;
height: 51px;
width: 92px;
}
Thats how you can display an image without actually using an <img> tag; nothing but css.
<img src="image.png" alt="Favorite icon" />
or
a {
background-image: url('image.png');
background-repeat: no-repeat;
display: inline-block;
height: 50px;
width: 150px;
}
Personally I would use the first one because the image is part of the structure and not a design element and CSS deals with design.
A very simple way to fix this problem
** 1. Create a div element that will encapsulate this image **
** 2. Add CSS in order to set that background of this div to be the image. (See code below). In this example the class name of your div will be called 'button'
.button
{
backgroundimage:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
Revise the Html *
Put the text you want to display into the aforementioned div with the class name 'button'
<div class="button">
<span>Favorite (1)</span>
</div>
* This will allow you to select the actual text while still maintaning the background *
Here is the complete version source with my modification for your reference.
<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">
<head>
<style>
.button
{
background-image:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
</style>
<title>Screen Shot 2012-02-09 at 12.02.45 PM.png</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" name="viewport">
<meta content="CloudApp" name="author">
<link href="http://assets.cld.me/1325250420/images/favicon.ico" rel="shortcut icon">
<!--[if (!IE)|(gte IE 8)]><!-->
<link href="http://assets.cld.me/1325250420/assets/viso-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link href="http://assets.cld.me/1325250420/assets/viso.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="http://assets.cld.me/1325250420/assets/viso.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://assets.cld.me/1325250420/assets/ie.js" type="text/javascript"></script>
<![endif]-->
</head>
<body id="image">
<header id="header">
<h1>Simple sharing</h1>
<h2>Screen Shot 2012-02-09 at 12.02.45 PM.png</h2>
<a class="embed" href="http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png">Direct link</a>
</header>
<section id="content">
<div class="button">
<span>Favorite (1)</span>
</div>
</section>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4ea557ec613f5d39e7000002');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>
a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}
This code works for me