I'm trying to use components like paper-rating, font awesome icons but they don't display anything in the page. I see that the tag is recoginsed but nothing is visible on the page. Below is a sample use of star-rating. Nethier the rating nor the map icon work
<section>
<template is="dom-if" if={{tests}}>
<template is="dom-repeat" items={{tests}}>
<a my-data="test" href="assessment/{{item.testId}}">
<paper-card class ="header" heading="{{item.assessmentTopic}}" image=""elevation="1" animated-shadow="false">
<iron-icon icon="maps:directions-bus"></iron-icon>
<div class="card-content" id="{{item.testId}}">
<img style="width : 75px; margin : 2px;" src="https://image.shutterstock.com/z/stock-vector-blackboard-inscribed-with-scientific-formulas-and-calculations-in-physics-and-mathematics-538136431.jpg" />
<div style="display: inline-block; margin-left: 10;">
<div class="small">
{{item.createdBy}}
</div>
<div class="small">
{{item.testId}}
</div>
<div>
<star-rating rating="4"></star-rating>
</div>
</div>
</div>
</paper-card>
</a>
</template>
</template>
</section>
So, I was able to solve this by updating iron-meta to version 2.0.0 in the bower.json and running bower update.
Related
I have implemented a carousel using PrimeNG which looks like this
Notice the style of the carousel indicators and navigators. I want to have the default style of indicators/navigators for the carousel like this
I have added the imports for CarouselModule and ButtonModule in my module.ts file but it does not work. Is this possible using CSS or any other way?
PrimeNG Documentation - https://www.primefaces.org/primeng/carousel
My code:
app.component.html
<p-carousel
[value]="planDetails"
styleClass="custom-carousel"
[numVisible]="3"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="3000"
>
<ng-template let-plan pTemplate="item">
<div class="centered-div">
<div class="plans">
<div class="card plan-card">
<div class="card-content">
<div class="plan-name">{{ plan?.planName }}</div>
<div class="plan-desc">
{{ plan?.description }}
</div>
<div class="plan-price">
<span class="plan-cost"
>$ {{ plan?.pricePerUser }}
<span>
<sup class="plan-currency">{{
plan?.currency
}}</sup>
</span></span
>
</div>
<div class="billing-way">per user billed annually</div>
<div class="plan-upgrade-btn">
<button
type="button"
class="remediator-blue-btn change-btn"
>
<span class="button-text" (click)="onUpgrade(plan)">
Select
</span>
</button>
</div>
<hr />
<div class="plan-features">Features</div>
<div class="plan-feature-1">
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text"
>Daily search limit -
{{ plan.dailySearchLimit }}</span
>
</div>
<div class="plan-feature-1">
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text"
>Maximum searches - {{ plan.maxSearches }}</span
>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-carousel>
</div>```
Please check that you have the primeng theme in angular.json file
can you upload the styles array from your angular.json file ?
add the theme to the styles array in angular.json
"node_modules/primeng/resources/themes/saga-blue/theme.css"
to edit the navigators icons with css you can use this:
::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next {
}
how can i center this edit icon even when one address string is longer than the other?
This is the column I'm having this problem
<el-table-column
prop="address"
label="Address">
<template slot-scope="scope">
{{scope.row.address}}
<el-button
type="primary"
icon="el-icon-edit"
circle
size="mini"
style="margin-left: 55px"
#click="open(scope.$index, scope.row)"
></el-button>
</template>
</el-table-column>
Here is the complete code:
https://jsfiddle.net/xhbzpvas/
<div style="display: flex">
<address style="flex-grow: 1"/>
<icon/>
</div>
I understand how to pass in a content block to a template.
<template name="myTemplate">
<div class="container">
{{> Template.contentBlock }}
</div>
</template>
{{#myTemplate}}
<h1> Hey </h1>
{{/myTemplate}}
<!-- results in -->
<div class="container>
<h1> Hey </h1>
</div>
What if there are multiple content blocks I want to be able to specify. Something like:
<template name="myTemplate">
<h1>
{{> Template.contentBlock_1 }}
</h1>
<div class="container">
{{> Template.contentBlock_2 }}
</div>
<div class="footer">
{{> Template.contentBlock_3 }}
</div>
</template>
And them I'm not sure how that would call that template such that you pass it multiple content blocks.
How does one achieve such behavior with Meteor Blaze?
We currently have an paper tab view with 3 tabs, each tab loads its own iron page. Inside the iron page we pull a list of elements using an API. The iron list successfully loads the api results but we can only view the first few elements.
The other elements are hidden as we are unable to scroll. How do we make the list scrollable? as the list view grows in size. The list is dynamically loaded when a particular tab is selected.
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title"><div class="logo"></div></span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="/" >
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="todays-sminq" href="/todays-sminq" on-click="onDataRouteClick">
<iron-icon icon="info"></iron-icon>
<span>Today's sminq</span>
</a>
<a data-route="upcoming-sminq" href="/upcoming-sminq" on-click="onDataRouteClick">
<iron-icon icon="mail"></iron-icon>
<span>Upcoming sminq</span>
</a>
<a on-click="logOut">
<iron-icon icon="user"></iron-icon>
<span>Log Out</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="small">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Sminq</div>
</div>
<!-- Application sub title -->
<!--<div class="bottom bottom-container center horizontal layout">-->
<!--<div class="bottom-title paper-font-subhead">waiting is now fun</div>-->
<!--</div>-->
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" >
<live-sminq ></live-sminq>
<!--paper-material elevation="1">
</paper-material>
<paper-material elevation="1">
</paper-material>
<paper-material elevation="1" class="paper-font-body2">
</paper-material-->
</section>
<section data-route="todays-sminq" id="sectiontodays" >
<todays-sminq></todays-sminq>
<!--paper-material elevation="1">
</paper-material-->
</section>
<section data-route="sminq-info">
<sminq-single
token_id ="{{params.id}}" token_number="{{params.no}}" user_name="{{params.name}}"
status_type="{{params.status}}"
user_mobile ="{{params.mobile}}"
queue_id ="{{params.queueId}}"
sminq_type="{{params.sminqType}}"
joinDate="{{params.date}}"
>
</sminq-single>
</section>
<section data-route="live-tokens"class="layout vertical fit">
<live-tokens
queue_id="{{params.id}}" user_name="{{params.name}}">
</live-tokens>
</section>
<section data-route="upcoming-sminq">
<upcoming-sminq>
</upcoming-sminq>
</section>
<section data-route="not-found">
<paper-material elevation="1">
<h2 class="page-title">Page Not Found</h2>
<p></p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-header-panel>
</paper-drawer-panel>
This is our main index.html we have created separate module which loads the tabs and the list view
The code for this module is attached below
<iron-ajax
id="list"
headers='{"Authorization": "xxxx","X-Vertical-Type": "xxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="handleErr"
debounce-duration="300"
last-response="{{ liveQueues }}"
on-response="ajaxResponse">
</iron-ajax>
<!--<template auto is="dom-if" if="{{loading}}"style="width:100%;">-->
<!--<paper-progress value="10" indeterminate="true" ></paper-progress>-->
<!--</template>-->
<div></div>
<span style="display:none;">[[selected]]</span>
<paper-spinner id="spinner" alt="Loading tokens numbers" ></paper-spinner>
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
</template>
</paper-tabs>
<iron-pages selected="{{selected}}">
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-material elevation="1">
<iron-list items="[[queueTokens]]" as="token">
<template>
<div>
<div class="item" tabindex="0">
<span class="avatar" >[[token.tokenNumber]]</span>
<a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
<div class="pad">
<div class="primary">[[token.userName]]</div>
<div class="secondary">[[token.userMobile]]</div>
<div class="secondary dim">[[token.notes]]</div>
<div class="secondary dim">[[token.joinTime]]</div>
</div>
</a>
<iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-material>
</template>
</iron-pages>
<iron-ajax
id="tokens"
headers='{"Authorization": "xxx","X-Vertical-Type": "xxxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="tokenError"
debounce-duration="300"
last-response="{{ queueTokens }}"
on-response="tokenResponse">
</iron-ajax>
<template is="dom-if" if="{{isQueueId}}">
<sminq-add queue_id="{{queueId}}"></sminq-add>
</template>
You can implement IronResizableBehavior to resize your list when you switch tabs (note: it should work by default though):
iron-list lays out the items when it receives a notification via the resize event. This event is fired by any element that implements IronResizableBehavior.
By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.
document.querySelector('iron-list').fire('resize');
I am encountering some problems with a custom element created by me, called <little-game></little-game>.
This is <little-game></little-game> template code :
<template>
<a href="{{link}}">
<paper-material elevation="1">
<paper-ripple></paper-ripple>
<iron-image src="{{img_url}}"></iron-image>
<div id="description">{{name}}</div>
<div id="category">{{category}}</div>
</paper-material>
</a></template>
And the :host css of this element:
:host {
display: inline-block;
text-decoration: none;
z-index:1;
}
Those <little-game></little-game> elements are displayed in a page and inside this page i have a <paper-scroll-header-panel> and a <paper-toolbar>. The problem is when i scroll down and the .tall <paper-toolbar> gets smaller, i can click through the <paper-toolbar> on <little-game>/<paper-ripple> element.
<paper-ripple> css :
paper-ripple {
z-index:1;}
mainToolbar html :
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<!--paper-icon-button icon="refresh"></paper-icon-button-->
<paper-icon-button icon="more-vert"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">App title</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center horizontal layout">
<div class="bottom-title paper-font-subhead">App subtitle</div>
</div>
</paper-toolbar>
mainToolbar css :
#mainToolbar {
z-index:3;}
So the main problem is about that i can click the <little-game></little-game> element through the toolbar.
There is an image to understand what i am talking about in a better way:
I think you need to cancel the tap event from propagating through, try adding an on-tap event handler on the paper-toolbar e.g.
<paper-toolbar id="mainToolbar" class="tall" on-tap="{{cancelEvent}}">
then add the function to cancel it
cancelEvent: function(event) {
event.stopPropagation();
}