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
Here is the output when viewing by clicking on index file
