I've recently updated polymer and components, and a weird thing appears.
I have paper-dialog element, and inside, on the left a paper-menu item with multiple paper-item. On the right, a simple div with some content.
When clicking on a paper-item, the content of the div will change.
Since the update, when clicking on a paper-item element, the dialog will automatically close.
After searching, it appears that if I remove the paper-menu element and only left the multiple paper-item, the problem will no longer occurs.
After looking inside the iron-menu-behavior, I found a new function (an override of _activateHandler), which, when commented, will kept previous functionning without closing the dialog.
I keep searching to find any solution, but anyone encountered the same problem?
For information :
<paper-dialog id="dialog" with-backdrop>
<div id="content"></div>
</paper-dialog>
And inside my div is added this :
<div class="content">
<div class="list">
<paper-menu>
<template is="dom-repeat" items="{{menu}}">
<paper-item on-click="_onCategorySelection">
<iron-icon icon="{{item.icon}}" class="icon"></iron-icon>
<span class="text">{{item.text}}</span>
</paper-item>
</template>
</paper-menu>
</div>
<div id="listContent">
<div class="noContent" hidden$="{{content}}">
<div class="noContentText">Pas de catégorie séléctionnée</div>
</div>
<template is="dom-if" if="{{content}}">
<div class="withContent">
<template is="dom-repeat" items="{{content}}" as="widget">
<badge data="{{widget}}" on-click="_onWidgetSelect"></badge>
</template>
</div>
</template>
</div>
</div>
Thanks a lot
Okay, looking at the problem, is seems to be a known issue: https://github.com/PolymerElements/iron-menu-behavior/issues/40
I'll point your JSBIN too there!
EDIT: it is yours! :)
Related
I have this code in ionic and the problem is that the grid layout isn't showing and the side menu is working well, any help will be great.
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button icon button-clear ion-round"</button>
</div>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item>About Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Contact Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Gallery</ion-item>
</ion-list>
<ion-list>
<ion-item>News</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<ion-content>
<div class="row">
<div class="col-50"> Gallery</div>
</div>
</ion-content>
</body>
Why are you opening a new ion-list to every item? Shouldn't you just use one list and inserting the items you want in it?
This way can cause problems in the scroll, any kind of distribution you want to apply to the elements should be done by css.
Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
No Java errors, Masonry is working, Infinite Scroll is activated in the theme, but don't know why it is not working:
http://prendaoffline.tumblr.com
Any tips?
Your div#pagination must be out of your div#content, like this
<div id="content" class="masonry">
<div class="posts masonry-brick">...</div>
<div class="posts masonry-brick">...</div>
<div class="posts masonry-brick">...</div>
...
</div>
<div id="pagination">
<div id="nextPage"></div>
</div>
It's not necessary the "»", keep it empty.
If you have your JS correctly this HTML code should work
I am trying to draw two google treemaps and keep them in tabs and am getting the error:
A negative value for svg attribute <width> is not allowed
Only one of the treemaps is visible. I am assuming the other one is not able to finish drawing. There is no other description of the error in the console. (Google chrome).
My code:
http://jsfiddle.net/tTqjr/
Solved the problem. The div element on which Google Annotated timeline was being created had display:none property. Just made sure that display:none is changed to display:block before calling the draw function.
Appreciate this wasn't the OP's issue, but I had the same error, and setting display: block; didn't make any difference for me, but I had padding-top: 50px; on the div for the chart, and removing that resolved the issue for me!
I wrapped my two divs in a boostrap row/col pair to solve and togglke them with hide()/show()/toggle() buttons.
From
<div class="row">
<div class="col-md-12" id="chart_div">
</div>
</div>
<div class="row">
<div class="col-md-12" id="chart_div2">
</div>
</div>
to:
<div class="row">
<div class="col-md-12">
<div id="chart_div">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="chart_div2">
</div>
</div>
</div>