Polymer: layout in Firefox, thin in Chrome
So, I know that Web Components, Shadow DOM and such tend to be implemented natively in Chrome today.
Firefox support requires Polyfill. According to the website, Polymer has Polyfill support in Firefox:
https://www.polymer-project.org/resources/compatibility.html
but when I made a very simple page it looks completely entrusted to me by Firefox. But, if I try the Polymer website in Firefox, it works there without any obvious problems.
Test URL: http://misc.snapcode.se/polymer/
This is what my test site looks like in Chrome:
and in Firefox:
The code can be seen below.
- But they say Firefox supports Polyfill and it does support CSS, so why is the layout / design so screwed?
- Why do they get their own site to work in Firefox, but the super-simple site I'm building is confusing?
- If I try to expand the document in FF it works great on my demo site , but if I use paper-dropdown on my own site built in the same way as described on the polymer website it messes up completely. Why?
What am I missing?
EDIT 1 I found out that in order for the title bar to be "correct" in Firefox, I need to remove the CSS in index.php for the {...} div:
It seems to me that the Shadow DOM is not working correctly even though I imported webcomponents.js, which should be a Polyfill.
EDIT 2
I looked in Firefox using Firebug and I see this:
As I can see, webcomponents.min.js is imported (I tested different js files) and there is something that says about ShadowDOMPolyfill. So I think this is even stranger.
EDIT 3 I have debugged Firefox using Firebug as shown below. As I can see, 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>
assignments to 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>
+2
source to share
1 answer
The problem persists as firefox does not create shadow DOM, but displays shadow content directly. Thus, the following screen snippet displays a general view:
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
If you remove this code and add some specific code, it will work. Below is a snippet for index.php with specific code.
<!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>
0
source to share