Polymer Elements don't show! (v1.0)

Question

Polymer Elements don't show! (v1.0)

259 views Asked by FarFar At 26 June 2015 at 16:20

I am using Polymer Paper Elements in my project. I use Brackets. When using Brackets live preview the elements show as I want then to. However, when i open the HTML file by navigating to it and clicking it, those elements fail to appear!

Any idea as to what might be going on?

Thanks in advance!

Here is my code:

HTML

<head>
    <title>MainFrame</title>

    <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="../js/Java.js"></script>

    <link href="stylesheets/Index.css" rel="stylesheet" type="text/css"/>

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/font-roboto/roboto.html">
    <link rel="import" href="../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
    <link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
    <link rel="import" href="../bower_components/iron-behaviors/index.html">
    <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-form-element-behavior/iron-form-element-behavior.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-meta/iron-meta.html">
    <link rel="import" href="../bower_components/iron-validatable-behavior/iron-validatable-behavior.html">
    <link rel="import" href="../bower_components/paper-behaviors/index.html">
    <link rel="import" href="../bower_components/paper-button/paper-button.html">
    <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
    <link rel="import" href="../bower_components/paper-input/paper-input.html">
    <link rel="import" href="../bower_components/paper-material/paper-material.html">
    <link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
    <link rel="import" href="../bower_components/paper-styles/paper-styles.html">
</head>

<body>                
    <div id="loginPop">
        <div id="closeLogin">
            <span></span>
            <span></span>
        </div>
        <div id="loginContainer">
            <div id="title">
                <div id="logologin"></div>MainFrame
            </div>

            <paper-input label="Email Address or ID" floatinglabel></paper-input>
            <paper-input type="password" label="Password" floatinglabel></paper-input>

            <div id="forgot">Forgot?</div>
            <div id="LoginPageOptions">
                <paper-checkbox id="staylogged">Stay Logged On</paper-checkbox>
                <div id="googlelogin">Login with Google+</div>
            </div>
            <div id="LoginPageButtons">
                <paper-button id="loginButton" raised>Login</paper-button>
                <paper-button id="signupbutton" raised>Sign Up</paper-button>
            </div>
        </div>

        <div class="anticlick" id="one"></div>
        <div class="anticlick" id="two"></div>
        <div class="anticlick" id="three"></div>
        <div class="anticlick" id="four"></div>
    </div>

CSS

/*-----------------------------------------  LOGIN POPUP  --------------------------------------*/

#loginpop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: rgb(242, 242, 242);
    height: 100%;
    width: 100%;
}

#loginContainer {
    position: absolute;
    width: 16%;
    height: 20%;
    left: 42%;
    top: 35%;
    font-family: main;
    color: #2a2a2a;
}

#title{
    font-size: 35;
    width: 100%;
    text-align: center;
}

#forgot {
    position: absolute;
    font-family: roboto;
    color: #2a2a2a;
    font-size: 14;
    top: 129;
    left: 80%;
}

#LoginPageOptions{
    width: 100%;
    position: absolute;
    top:;
}

#staylogged {
    position: absolute;
    left: 0;
    --paper-checkbox-checked-color: var(--paper-black-500);
    --paper-checkbox-checked-ink-color: var(--paper-black-500);
}

#googlelogin {
    position: absolute;
    top: 0;
    right: 0;
}

#LoginPageButtons{
    position: absolute;
    top: 110%;
    width: 100%;
}

#loginButton {
    position: absolute;
    left: 20%;
    background: #000;
    color: #fff; 
}

#signupbutton {
    position: absolute;
    right: 20%;
}

.anticlick {
    position: absolute;
    opacity: 0;
    outline-style: dotted;
}

#one, #two {
    height: 100%;
    width: 37.5%;
    top: 0;
}

#three, #four {
    height: 30%;
    width: 100%;
}

#one{
    left: 0;
}

#two{
    right: 0;
}

#three {
    top: 0;
}

#four{
    bottom: 0;
}

/*--  CLOSE LOGIN POPUP  --*/
#closelogin {
    width: 40px;
    height: 40px;
    position: relative;
    top: 2.6%;
    left: 97%;
    cursor: pointer;
    z-index: 4;
}   

#closelogin span {
    position: absolute;
    height: 1px;
    width: 20;
    background: #000;
    margin: 24%;
}

#closelogin span:nth-child(1) {
    top: 10;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#closelogin span:nth-child(2) {
    top: 10;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

Here is the output when viewing with Brackets live preview Working

Here is the output when viewing by clicking on index file Not Working

Original Q&A

TechQA.

Polymer Elements don't show! (v1.0)

There are 0 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in POLYMER

Related Questions in PAPER-ELEMENTS

Popular Questions

Popular Tags

Trending Questions