How to use Polymer paper-menu-button inside paper-toolbar? - polymer

i want to create a dropdown menu and add logout button in toolbar. But paper-menu-button is not working inside paper-toolbar.
<paper-toolbar id="order-toolbar">
<template is="dom-if" if="[[ showHome ]]">
<img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
</template>
<template is="dom-if" if="[[ !showHome ]]">
<iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
</template>
<h2 class="orders-heading">Store owner</h2>
<paper-menu-button>
<paper-icon-button id="header-menu-button" icon="more-vert" slot="dropdown-trigger"></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-listbox>
</paper-menu-button>
</paper-toolbar>


<paper-toolbar id="order-toolbar">
<template is="dom-if" if="[[ showHome ]]">
<img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
</template>
<template is="dom-if" if="[[ !showHome ]]">
<iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
</template>
<h2 class="orders-heading">Store owner</h2>
<paper-menu-button>
<paper-icon-button id="header-menu-button" icon="more-vert" class="dropdown-trigger">
</paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-listbox>
</paper-menu-button>
</paper-toolbar>
I notice you are using slot="dropdown-trigger". Try using class="dropdown-trigger". I think slot must be from Polymer 2.0?

Related

V-If dependent on a V-For

I am confused on where I need template tags for this code. Originally I had no templates and my v-ifs didn't load. I added them in to see if it would fix it but had no luck. Weirdly my bottom v-if with the delete button seems to work. All the data seems to be correctly initialized. I saw people using the computed data section but since every post entry is rendered it seems like not the correct way to do this.
<!-- and now the posts -->
<div class="container block">
<template v-for="post in posts">
<div class="notification mb-4">
<h1><strong>{{post.content}}</strong></h1>
<h2><small>{{post.name}}</small></h2>
<!-- Delete Icon -->
<div class="columns">
<div class="column is-11">
<!-- Thumbs stuff -->
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_up(post._idx)" #mouseover="post_over(post._idx, true)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === 1">
<!-- Filled in -->
<i class="fa fa-thumbs-up"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-up"></i>
</template>
</span>
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_down(post._idx)" #mouseover="post_over(post._idx, false)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === -1">
<!-- Filled in -->
<i class="fa fa-thumbs-down"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-down"></i>
</template>
</span>
<template v-if="post.show_likers">
<span class="is_link">Liked by</span>
</template>
<template v-if="post.show_dislikers">
<span class="is_link">Disliked by</span>
</template>
</div>
<div class="column">
<div v-if="post.owner" class="container block">
<span class="button inverted is-light icon is-medium has-text-danger" #click="delete_post(post._idx)">
<i class="fa fa-trash"></i>
</span>
</div>
</div>
</div>
</div>
</template>
</div>
Also my icons that are "fa fa-thumbs-down" work but my "fa fa-thumbs-o-down" do not work, any idea why?

Chack you version of font awesome fa fa-thumbs-o-down is for 4:
const app = Vue.createApp({
data() {
return {
posts: [{_idx: 1, content: 'bbb', name: 'BBB', rating: 0, show_likers: 8, show_dislikers: 2, owner: 'www'}]
};
},
methods: {
post_over(id) {},
post_out(id) {}
}
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<div class="container block">
<template v-for="(post, i) in posts" :key="i">
<div class="notification mb-4">
<h1><strong>{{post.content}}</strong></h1>
<h2><small>{{post.name}}</small></h2>
<!-- Delete Icon -->
<div class="columns">
<div class="column is-11">
<!-- Thumbs stuff -->
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_up(post._idx)" #mouseover="post_over(post._idx, true)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === 1">
<!-- Filled in -->
<i class="fa fa-thumbs-up"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-up"></i>
</template>
</span>
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_down(post._idx)" #mouseover="post_over(post._idx, false)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === -1">
<!-- Filled in -->
<i class="fa fa-thumbs-down"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-down"></i>
</template>
</span>
<template v-if="post.show_likers">
<span class="is_link">Liked by</span>
</template>
<template v-if="post.show_dislikers">
<span class="is_link">Disliked by</span>
</template>
</div>
<div class="column">
<div v-if="post.owner" class="container block">
<span class="button inverted is-light icon is-medium has-text-danger" #click="delete_post(post._idx)">
<i class="fa fa-trash"></i>
</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>

How to link iron selector with iron pages?

I've been working with Polymer lately, and I have an iron selector full of paper-icon-items in a paper drawer for navigation purposes. But for some reason, I can't get them to link:
<iron-selector selected="[[page]]" attr-for-selected="name">
<paper-icon-item name="home">
<iron-icon icon="icons:home" item-icon></iron-icon> Home
</paper-icon-item>
<paper-icon-item name="account">
<iron-icon icon="social:person" item-icon></iron-icon> Account
</paper-icon-item>
<paper-icon-item name="news">
<iron-icon icon="icons:chrome-reader-mode" item-icon></iron-icon> News
</paper-icon-item>
<paper-icon-item name="downloads">
<iron-icon icon="icons:cloud-download" item-icon></iron-icon> Downloads
</paper-icon-item>
<paper-icon-item name="contact">
<iron-icon icon="icons:mail" item-icon></iron-icon> Contact
</paper-icon-item>
</iron-selector>
And then the iron pages:
<iron-pages selected="[[page]]" attr-for-selected="name">
<section name="home"> <h1>Home</h1> </section>
<section name="account"> <h1>Account</h1> </section>
<section name="news"> <h1>News</h1> </section>
<section name="downloads"> <h1>Downloads</h1> </section>
<section name="contact"> <h1>Contact</h1> </section>
</iron-pages>

Square brackets are used for one way data binding, so the change to "page" made by iron-selector can't propagate. Try changing the binding type in the iron-selector:
<iron-selector selected="{{page}}" attr-for-selected="name">
This should allow the change to propagate to the iron-pages.

It is working for me when I change the code to:
<iron-selector selected="{{pages}}" attr-for-selected="name">
<paper-icon-item name="home">
<iron-icon icon="icons:home" item-icon></iron-icon> Home
</paper-icon-item>
<paper-icon-item name="account">
<iron-icon icon="social:person" item-icon></iron-icon> Account
</paper-icon-item>
<paper-icon-item name="news">
<iron-icon icon="icons:chrome-reader-mode" item-icon></iron-icon> News
</paper-icon-item>
<paper-icon-item name="downloads">
<iron-icon icon="icons:cloud-download" item-icon></iron-icon> Downloads
</paper-icon-item>
<paper-icon-item name="contact">
<iron-icon icon="icons:mail" item-icon></iron-icon> Contact
</paper-icon-item>
</iron-selector>
<iron-pages selected="[[pages]]" attr-for-selected="name">
<section name="home"> <h1>Homes</h1> </section>
<section name="account"> <h1>Account</h1> </section>
<section name="news"> <h1>News</h1> </section>
<section name="downloads"> <h1>Downloads</h1> </section>
<section name="contact"> <h1>Contact</h1> </section>
</iron-pages>
The difference is [[pages]] and {{pages}} in iron-selector.

Rendering of Polymer web app on safari and firefox

I'm having a nightmare on rendering my webapp on safari. I have a iron-list in my custom element and the data that will be display are from iron-ajax request. Everything works well in chrome but when I test it on safari, it wasn't rendered properly. Here is what I notice under the hook,
for safari:
<iron-list id="abc" style="min-height: 50px; overflow: auto;" selection-enabled="" class="style-scope view-file x-scope iron-list-0">
<array-selector id="selector" class="style-scope iron-list">
</array-selector>
<div id="items" class="style-scope iron-list" style="height: 15008px;">
<template class="style-scope view-file"></template>
<div class="style-scope view-file" style="transform: translate3d(0px, 0px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="0">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">disk</label>
</div>
<div class="cell ctime style-scope list-row">29 May 2016 at 21:32:38 GMT+2</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 1876px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">lost+found</label>
</div>
<div class="cell ctime style-scope list-row">29 May 2016 at 21:32:20 GMT+2</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 3752px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">private</label>
</div>
<div class="cell ctime style-scope list-row">29 May 2016 at 21:32:38 GMT+2</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
</div>
</iron-list>
for chrome:
<iron-list id="abc" style="min-height: 50px; overflow: auto;" selection-enabled="" class="style-scope view-file x-scope iron-list-0">
<array-selector id="selector" class="style-scope iron-list">
</array-selector>
<div id="items" class="style-scope iron-list" style="height: 328px;">
<template class="style-scope view-file"></template>
<div class="style-scope view-file" style="transform: translate3d(0px, 0px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="0">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">disk</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 41px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">lost+found</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:20 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 82px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">private</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 123px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">public</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 164px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">replica</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 205px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">reserved</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 246px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">resilient</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 287px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">tape</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
</div>
</iron-list>
one major thing that stick out of both snippets is the difference in the height of the div, for chrome:
<div id="items" class="style-scope iron-list" style="height: 328px;">
and for safari:
<div id="items" class="style-scope iron-list" style="height: 15008px;">.
Here is the source code of the element:
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../../../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../list-view/list-row.html">
<link rel="import" href="../../access-denied-or-empty-directory/access-denied-or-empty-directory.html">
<dom-module id="view-file">
<style>
:host {
#apply(--layout-fit);
#apply(--layout-vertical);
margin: 0px 30px;
/*Prevent text selection after double click*/
-webkit-user-select: none;
/* webkit (safari, chrome) browsers */
-moz-user-select: none;
/* mozilla browsers */
-khtml-user-select: none;
/* webkit (konqueror) browsers */
-ms-user-select: none;
/* IE10+ */
}
.fit {
#apply(--layout-fit);
}
.item {
text-decoration: none !important;
background-color: white;
#apply(--layout-flex);
cursor: pointer;
}
.item:hover {
background-color: #e9e9e9;
}
.item.selected {
background-color: #2196F3;
color: #fafafa;
outline: 0;
}
</style>
<template>
<iron-ajax id="ajax" auto url="{{url}}" method="GET" content-type="application/json" headers$='[[_computeHeaders(isSomebody)]]' handle-as="json" on-response="handleResponse" last-response="{{data}}">
</iron-ajax>
<paper-material id="content" elevation="1">
<template is="dom-if" if="{{hasFiles}}" restamp>
<iron-list id="abc" items="[[data.children]]" style="min-height:50px;" selected-item="{{selectedItem}}" selected-items="{{selectedItems}}" selection-enabled>
<template>
<div>
<list-row class$="[[_computedClass(selected)]]" tabindex$="[[tabIndex]]" name="{{item.fileName}}" file-type="{{item.fileType}}" ctime="{{item.creationTime}}" mtime="{{item.mtime}}" size="{{item.size}}" loc="{{item.fileLocality}}" parent-path="[[parent]]">
</list-row>
</div>
</template>
</iron-list>
</template>
<template is="dom-if" if="{{isEmptyDenied}}" restamp>
<access-denied-or-empty-directory message="{{msg}}"></access-denied-or-empty-directory>
</template>
</paper-material>
</template>
<script>
Polymer
({
is: "view-file",
properties: {
path: {
type: String,
value: "/",
notify: true
},
parent: {
type: String,
notify: true,
computed: '_computeParentPath(path)'
},
selectedItems: {
type: Object
},
selectedItem: {
type: Object
},
isSel: {
type: Boolean,
notify: true
},
hasFiles: {
type: Boolean,
notify: true
},
isEmptyDenied: {
type: Boolean,
notify: true
},
isSomebody: {
type: Boolean,
notify: true
},
url: {
type: Object,
notify: true,
value: function() {
return window.CONFIG.restHostName + ":" + window.CONFIG.restPort + window.CONFIG.restPath +
"namespace/?children=true&locality=true";
},
computed: '_url(path)'
},
msg: {
type: String,
notify: true
},
},
attached: function() {
this.isSomebody = app.$.WhoAmI.isSomebody;
},
_computedClass: function(isSelected) {
var classes = 'item';
if (isSelected) {
classes += ' selected';
}
this.updateStyles();
return classes;
},
_url: function(path) {
if (this.path == null || this.path == "" || this.path == "/") {
return window.CONFIG.restHostName + ":" + window.CONFIG.restPort +
window.CONFIG.restPath + "namespace/?children=true&locality=true";
} else {
path = decodeURIComponent(this.path);
path = path.replace(/=/g, "/");
return window.CONFIG.restHostName + ":" + window.CONFIG.restPort + window.CONFIG.restPath +
"namespace" + path + "/?children=true&locality=true";
}
},
_computeParentPath: function(path) {
if (this.path == null || this.path == "" || this.path == "/") {
path = "/";
return path;
} else {
path = decodeURIComponent(this.path);
path = path.replace(/=/g, "/");
return path + "/";
}
},
_computeHeaders: function(isSomebody) {
//For now use this for this development stage
// TODO: need to re-wire this function activities
if (isSomebody == true) {
if (sessionStorage.upauth == null || sessionStorage.upauth == "") {
return '{"Accept":"application/json"}';
} else {
auth = sessionStorage.upauth;
return '{"Accept":"application/json", "Authorization":"Basic ' + auth + '"}';
}
} else {
return '{"Accept":"application/json"}';
}
},
handleResponse: function(e, request) {
//FIXME: Not the suitable solution. Error not properly handle.
x = request.xhr.response.children;
if (x.length == 0 || (x.length == 1 && (x[0].messages != undefined || x[0].messages != null))) {
this.isEmptyDenied = true;
this.hasFiles = false;
if (x.length == 0) {
this.msg = "Empty Directory";
} else if (x[0].messages != undefined || x[0].messages != null) {
this.msg = (x[0].messages).toString();
}
} else {
this.isEmptyDenied = false;
this.hasFiles = true;
}
Polymer.dom.flush();
this.updateStyles();
e.stopPropagation();
},
});
</script>
</dom-module>
And the index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="import" id="bundle" href="elements/elements.html">
</head>
<body class="fullbleed layout vertical">
. . .
<div class="fit">
<view-file id="homeDir"></view-file>
</div>
. . .
</body>
</html>
Please how can I fix this

You're probably missing this:
<script>
// Load Web Components when not supported
var webComponentsSupported = ("registerElement" in document
&& 'import' in document.createElement("link")
&& 'content' in document.createElement("template"));
if (!webComponentsSupported) {
var script = document.createElement("script");
script.src = "assets/bower_components/webcomponentsjs/webcomponents-lite.js";
document.head.appendChild(script);
console.log("WebComponents Loaded");
}
</script>
You should put this script on the index, right after loading polymer and the elements. This script will load WebComponents when it isn't supported by default.

md-no-focus-style does not work properly in my setup

I have a button to open my navbar:
And after I click it it get's some kind of hitmarker:
After clicking on some navbar item (thus switching to next state/view) the hitmarker should disappear. Unforunately the hitmarker is present till I click on a random element.
The html for the button:
<div ng-controller="navbarCtrl" ng-cloak>
<md-content>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" ng-click="toggleMenu()" aria-label="Menu">
<md-icon md-svg-icon="assets/img/menu.svg"></md-icon>
</md-button>
<h2>
<span><a ui-sref="overview">Test</a></span>
</h2>
<span flex></span>
<md-button class="md-icon-button" ui-sref="account" aria-label="Account">
<md-icon md-svg-icon="assets/img/account.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
</md-content>
<section layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
<md-toolbar class="md-theme-indigo" layout="row">
<h1 class="md-toolbar-tools">Menu</h1>
<span flex></span>
<md-button class="md-icon-button" aria-label="close" ng-click="close()">
<md-icon md-svg-icon="assets/img/closeNavbar.svg"></md-icon>
</md-button>
</md-toolbar>
<div layout="column" layout-align=" center">
<md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="overview">Overview</md-button>
</div>
</md-sidenav>
</section>
</div>
<div ui-view></div>
What do I have to change in order to fix this?

You need this in your CSS:
.md-focused {
background: transparent !important;
}

add this to your CSS:
md-button:focus, md-icon:focus {
outline: none;
}

Material design layout CSS is not working in ui-view

I was following the starter app for material design and its working fine when try to view all the code in index.html, when I include the ui-view the layout gets distorted ..
index.html
<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar class="md-whiteframe-z1">
<h1>Users</h1>
</md-toolbar>
<md-list>
<md-list-item ng-repeat="it in ul.users">
<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
{{it.name}}
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
<md-toolbar layout="row" class="md-whiteframe-z1">
<md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
<md-icon md-svg-icon="menu" ></md-icon>
</md-button>
<h1>Angular Material - Starter App</h1>
</md-toolbar>
<md-content flex id="content">
<md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
<h2>{{ul.selected.name}}</h2>
<p>{{ul.selected.content}}</p>
<md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
<md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
<md-icon md-svg-icon="share"></md-icon>
</md-button>
</md-content>
</div>
But when I inlcude the
index.html
<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar class="md-whiteframe-z1">
<h1>Users</h1>
</md-toolbar>
<md-list>
<md-list-item ng-repeat="it in ul.users">
<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
{{it.name}}
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<div ui-view></div>
and
source.html as
<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
<md-toolbar layout="row" class="md-whiteframe-z1">
<md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
<md-icon md-svg-icon="menu" ></md-icon>
</md-button>
<h1>Angular Material - Starter App</h1>
</md-toolbar>
<md-content flex id="content">
<md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
<h2>{{ul.selected.name}}</h2>
<p>{{ul.selected.content}}</p>
<md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
<md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
<md-icon md-svg-icon="share"></md-icon>
</md-button>
</md-content>
</div>