CODEWITHSUNDEEP
cssgoogle-chromefirefoxpolymerweb-component
Ted
Ted

Reputation: 20184

Polymer: Layout screwed up in Firefox, fine in Chrome

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:

enter image description here

and in Firefox:

enter image description here

The code can be seen below.

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 {...}:

enter image description here

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:

enter image description here

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? =)

enter image description here

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&nbsp;
                <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>

Upvotes: 2

Views: 1604

Answers (1)

Vivek Marakana
Vivek Marakana

Reputation: 96

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>

Upvotes: 0

Related Questions