I've been getting an error while trying to apply a core-animated-pages element, with polymer, to my element.
I've searched the code for errors, missing linking elements, missing imports, styles, and found nothing.
The idea is for a small app that once you click on the login button, shown in a customized login box, it will change the section where the login is to a new one.
Here is my code:
content-page.html
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="components/paper-login-box-master/paper-login-box.html">
<polymer-element name="content-page" attributes="sel user pass">
<template>
<style>
#section {
background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230)) 0% 0% repeat scroll transparent;
}
#core_animated_pages {
width: 100%;
height: 100%;
overflow: hidden;
left: 0px;
top: 0px;
position: absolute;
background-color: rgb(238, 238, 238);
}
core-pages-animated transitions {
width: 100%;
height: 100%;
}
paper-loginbox {
margin-top: 50px;
}
</style>
<core-animated-pages selected="{{ sel }}" transitions="fade-scale">
<section>
<div layout vertical center ng-controller="LoginController">
<paper-loginbox user="{{ user }}" pass="{{ pass }}" on-login="{{ login }}"></paper-loginbox>
</div>
</section>
<section>
<div center>OLA</div>
</section>
</core-animated-pages>
</template>
<!--
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
-->
<script>
Polymer({
sel: 0,
user: "",
pass: "",
login: function() {
this.fire("login");
},
ngMapping: {
ngSel: {
primitive: 'sel'
},
ngUser: {
primitive: 'user'
},
ngPass: {
primitive: 'pass'
},
ngLogin: {
event: "login"
}
}
});
</script>
</polymer-element>
index.html where I call the element and change the value of the selected
<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>RecordStore - A sua loja de albuns preferida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Encomenda de albuns (FictÃcio)" />
<script src="components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/font-roboto/roboto.html">
<link rel="import" href="components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/core-icon/core-icon.html">
<link rel="import" href="components/core-icons/social-icons.html">
<link rel="import" href="components/core-icon-button/core-icon-button.html">
<link rel="import" href="content-page.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
#core_scroll_header_panel {
width: 100%;
height: 100%;
position: absolute;
}
core-toolbar {
background: #800000;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
paper-loginbox {
margin-top: 50px;
}
</style>
</head>
<body unresolved>
<core-scroll-header-panel headermargin="85.33333333333334" keepcondensedheader headerheight="128" id="core_scroll_header_panel" >
<core-toolbar id="core_toolbar" class="medium-tall" layout horizontal>
<div class="bottom">
<core-icon icon="store"></core-icon>
<paper-item disabled>Loja</paper-item>
<!--
<core-icon-button icon="post-github"></core-icon-button>
<paper-tabs id="tabs" selected="all" center horizontal layout class="bottom fit">
<paper-tab name="all" layout horizontal center-center flex inline active>All</paper-tab>
<paper-tab name="favorites" layout horizontal center-center flex inline active>Favorites</paper-tab>
</paper-tabs>
-->
</div>
</core-toolbar>
<content-page ng-polymer ng-sel="coise" ng-user="user" ng-pass="upass" ng-login="onlogin()"></content-page>
</core-scroll-header-panel>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="ng-polymer-elements-master/ng-polymer-elements.min.js"></script>
<script>
angular.module('loginApp', ['ng-polymer-elements'])
.controller('LoginController', ['$scope', function($scope) {
$scope.user = "lala";
$scope.onlogin = function() {
$scope.upass = $scope.user;
$scope.coise = 1;
};
}]);
</script>
</body>
</html>
This is the error I receive:
Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
at core-animated-pages.Polymer.applySelection (http://localhost/components/core-selector/core-selector.html:454:15)
at core-animated-pages.Polymer.selectedItemChanged (http://localhost/components/core-animated-pages/core-animated-pages.html:418:14)
at core-animated-pages.properties.invokeMethod (http://localhost/components/polymer/polymer.js:9355:12)
at core-animated-pages.properties.notifyPropertyChanges (http://localhost/components/polymer/polymer.js:9344:20)
at Object.Observer.report_ (http://localhost/components/polymer/polymer.js:4890:24)
at Object.createObject.check_ (http://localhost/components/polymer/polymer.js:5296:12)
at callback (http://localhost/components/polymer/polymer.js:4788:20)
I see you are importing slide-from-right.html, but you then use transitions="fade-scale" (which is not defined as a core-animated-pages transition). You instead need to import each transition you wish to use, and separate them by spaces in the transitions list:
<link rel="import" href="components/core-animated-pages/transitions/cross-fade.html">,
<link rel="import" href="components/core-animated-pages/transitions/scale-up.html">,
...
<core-animated-pages selected="{{ sel }}" transitions="cross-fade scale-up">
Related
I am new to ajax I want to load images first and then footer but when I am trying to load the images using ajax the footer gets loaded first instead of the images which makes the image overlap the footer. As you can see in the below image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
<title>Image Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "js/data.json",
dataType: "json",
success: function(data)
{
$.each(data, function(i,pic){
$("ul.gallery").append("<li><img src='images/square/"+ pic.path + "' alt='" + pic.title + "'></li>");
});
},
error: function() {
console.log("Picture cannot be loaded");
}
});
});
</script>
<style>
.b-footer{
background-color: #274472;
color:white;
}
.gallery {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallery {
list-style-type: none;
}
.gallery li{
float: left;
padding: 30px;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<main class="container">
<ul class="gallery">
</ul>
</main>
<footer class="text-center p-4 b-footer">
This is a footer
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">About</li>
<li class="breadcrumb-item">Contact</li>
<li class="breadcrumb-item">Browse</li>
</ol>
</nav>
</div>
</footer>
</body>
</html>
Can anyone help me out with how to resolve this issue like how to make the footer to be loaded later after the images are loaded? A correct code can help me.
It's not an ajax issue you just need to add proper footer CSS here is working solution of your problem just replace footer CSS with this
.b-footer{
background-color: #274472;
color:white;
position: absolute;
bottom: 0;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
<title>Image Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("ul.gallery").append("<li><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtfeR2gr_Z2U5rNiTKieMXMM9ZY96GbKUQQg&usqp=CAU'></li>");
$.ajax({
url: "js/data.json",
dataType: "json",
success: function(data)
{
},
error: function() {
}
});
});
</script>
<style>
.b-footer{
background-color: #274472;
color:white;
position: absolute;
bottom: 0;
width: 100%;
}
.gallery {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallery {
list-style-type: none;
}
.gallery li{
float: left;
padding: 30px;
position: relative;
overflow: hidden;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<main class="container">
<ul class="gallery">
</ul>
</main>
<footer class="text-center p-4 b-footer">
This is a footer
<div id="footer">
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">About</li>
<li class="breadcrumb-item">Contact</li>
<li class="breadcrumb-item">Browse</li>
</ol>
</nav>
</div>
</footer>
</body>
</html>
</body>
</html>
Note:- for proper results see in full page.
I think your footer would be fine if you added a clearfix class to your main container. The reason is that all your li's are float left so your footer will overlap the main container.
.clearfix::after {
content: "";
clear: both;
display: block;
}
SUMMARY
The clearfix, for those unaware, is a CSS hack that solves a
persistent bug that occurs when two floated elements are stacked next
to each other. When elements are aligned this way, the parent
container ends up with a height of 0, and it can easily wreak havoc on
a layout.
https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/
Try this in your website
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
<title>Image Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "js/data.json",
dataType: "json",
success: function(data)
{
$.each(data, function(i,pic){
$("ul.gallery").append("<li><img src='images/square/"+ pic.path + "' alt='" + pic.title + "'></li>");
});
},
done: function() {
$("#footer").show();
},
error: function() {
console.log("Picture cannot be loaded");
}
});
});
</script>
<style>
.b-footer{
background-color: #274472;
color:white;
}
.gallery {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallery {
list-style-type: none;
}
.gallery li{
float: left;
padding: 30px;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<main class="container">
<ul class="gallery">
</ul>
</main>
<footer class="text-center p-4 b-footer" id="footer" style="display:none;">
This is a footer
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">About</li>
<li class="breadcrumb-item">Contact</li>
<li class="breadcrumb-item">Browse</li>
</ol>
</nav>
</div>
</footer>
</body>
</html>
The simple answer is to remove existing styles for .gallery li and add the below
.gallery li {
display: inline-block;
padding: 30px;
position: relative;
overflow: hidden; }
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
Problem:
I am using Bootstrap Slider, which can be found here https://seiyria.com/bootstrap-slider/. When using example 8, the tooltip does not show as it does on the website.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Judgement</title>
<!-- Bootstrap Core CSS -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Slider -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>
<body>
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
</script>
</body>
</html>
Example Snippet:
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
body {
padding: 100px;
}
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
JS Fiddle:
http://jsfiddle.net/2u4xs9cv/1/
Desired outcome:
To always show the tooltip when the slider changes.
I know this is pretty late but I was looking for a solution and am posting here in hopes that this might be of help for someone else.
I set
.tooltip.in {
opacity: 1;
}
and the tooltip started showing.
Using Bootstrap v4.2.1 and the latest version of bootstrap-spinner with their angular directive (in their slider.js file), I used the following HTML
<slider id="intervalSlider"
ng-model="refreshInterval" on-stop-slide="intervalChanged($event,value)"
min="10" step="10" max="60" slider-tooltip="show" ></slider>
I found that the tootip and arrow did not display. I added the following CSS into my custom CSS file
.slider .tooltip.in {
opacity: 1;
}
.slider .tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.slider .tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.slider .tooltip.top {
padding: 5px 0;
}
This is still opened issue for Bootstrap 4.3.1 - #689. The Bootstrap v4 is not yet fully supported.
On the end of the discussed issue they are shown some solutions I use it following:
$("#ex12c").slider({ id: "slider12c", precision:2, step:0.01, min: 0.70, max: 1.00, range: true, value: [0.80, 0.90] });
#slider12c .slider-track-high {
background: #5cb85c;
}
#slider12c .slider-selection {
background: #ffc107;
}
.slider-handle::after{
content: attr(aria-valuenow);
position: absolute;
bottom: calc(100% + 0.5em);
left: 50%;
transform: translateX(-50%);
font-size: 0.75em;
font-weight: 600;
color: #393f50;
background-color: white;
box-shadow: 0px 0px 6px 0px rgba(182, 182, 182, 0.4);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.3em;
width: 4em;
height: 2.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 4 CDN CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap 3 slider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" />
</head>
<body>
<br />
<br />
<input id="ex12c" type="text"/>
<!-- Bootstrap 4 CDN JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js">
</script>
<body/>
<html/>
I am new to the Google Polymer Project. I just initialize a project to make a custom website design with Polymer. However, i would like to know how to build navbar menu with specific pages. I need to show separate content on the body when we click on each tabs. Any help would be greatly appreciated !!
Here is my code:
iron-image {
width: 400px;
height: 400px;
background-color: black;
}
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-styles/classes/global.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<style is="custom-style">
:root {
--paper-tabs-selection-bar-color: var(--paper-light-blue-900);
--paper-tab-ink: var(--paper-light-blue-100);
--paper-tabs: {
color: white;
background-color: var(--paper-light-blue-500);
};
}
</style>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
JSFiddle: https://jsfiddle.net/8boLeohf/
To make it working you need to use iron-pages with paper-tabs. Check the updated fiddle.
var pages = document.querySelector('iron-pages');
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('iron-select', function() {
pages.selected = tabs.selected;
});
:root {
--paper-tabs-selection-bar-color: var(--paper-light-blue-900);
--paper-tab-ink: var(--paper-light-blue-100);
--paper-tabs: {
color: white;
background-color: var(--paper-light-blue-500);
}
;
}
iron-image {
width: 400px;
height: 400px;
background-color: black;
}
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-styles/classes/global.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="iron-pages/iron-pages.html">
<style is="custom-style">
:root {
--paper-tabs-selection-bar-color: var(--paper-light-blue-900);
--paper-tab-ink: var(--paper-light-blue-100);
--paper-tabs: {
color: white;
background-color: var(--paper-light-blue-500);
};
}
</style>
<div unresolved vertical layout>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<iron-pages selected="0">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</iron-pages>
</div>
When I run my code I can only see the STANDARD TEST paper-header-panel.
Everything within paper-drawer-panel seems to be hidden.
If I set the initial paper-header-panel(class=blue) to 1000px, The rest of the content will show.
Is there anything I need to set so the initial paper-header-panel will change it's height automatically based on the content?
Thanks
<link rel="import" href="/apps/polymer-chat/js/bower_components/polymer/polymer.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-item/paper-item.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/apps/polymer-chat/css/app-theme.html">
<dom-module id="main-component">
<link rel="import" type="css" href="/apps/polymer-chat/css/main-component.css">
<template>
<paper-header-panel class="blue">
<div class="paper-header">STANDARD TEST</div>
<paper-drawer-panel
id="mainDrawerPanel"
class="main-drawer-panel"
responsive-width="600px"
drawer-width="[[_computeListWidth(_isMobile)]]"
drawer-toggle-attribute="list-toggle"
narrow="{{_isMobile}}"
>
<paper-header-panel class="list-panel" drawer>
<paper-menu class="list" on-iron-activate="_listTap">
<paper-item>1</paper-item>
<paper-item>2</paper-item>
<paper-item>3</paper-item>
<paper-item>4</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel class="content-panel" main>
<paper-toolbar responsive-width="600px">
<paper-icon-button icon="menu" list-toggle></paper-icon-button>
<span class="flex">CHAT PERSON NAME HERE</span>
</paper-toolbar>
<div class="content">MAIN AREA</div>
</paper-header-panel>
</paper-drawer-panel>
</paper-header-panel>
</template>
<script>
Polymer({
is: 'main-component',
_computeListWidth: function(isMobile) {
// when in mobile screen size, make the list be 100% width to cover the whole screen
return isMobile ? '100%' : '25%';
},
_listTap: function() {
this.$.mainDrawerPanel.closeDrawer();
}
});
</script>
</dom-module>
:host {
display:block;
}
.paper-header {
height: 60px;
font-size: 20px;
color: var(--text-primary-color);
line-height: 60px;
padding: 0 30px;
}
.blue .paper-header {
background-color: var(--default-primary-color);
}
.list-panel {
background-color: #fafafa;
--paper-header-panel-standard-container: {
border-right: 1px solid #ccc;
};
}
paper-toolbar {
background-color: #42A5F5;
}
.list {
background-color: #FFFFFF;
}
.list paper-item {
height: 80px;
border-bottom: 1px solid #dedede;
background-color: #fafafa;
color: #000000;
}
.main-drawer-panel:not([narrow]) [list-toggle] {
display: none;
}
.content {
height: 3000px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer Demo</title>
<script src="js/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/apps/polymer-demo/components/main-component.html">
<style is="custom-style">
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="fullbleed layout vertical">
<main-component></main-component>
</body>
</html>
Nevermind. I figured out the problem.
The issue was being caused by the HTML DOCTYPE
After removing it. Everything is now working correctly.