Multiple dialogs on a webpage in Polymer - polymer

Question

I am trying to display multiple dialogs on the same page. It is for a list of my android apps on a single page, and I found that dialogs size according to the window size. I need them to not be on top of eachother, but can't figure out if that is possible.
http://dunriteapps.com/material.htm#apps
<section>
<paper-dialog transition="paper-dialog-transition-bottom" opened="true">
...
</paper-dialog>
</section>
<section>
<paper-dialog transition="paper-dialog-transition-bottom" opened="true">
...
</paper-dialog>
</section>
I feel like I should be using something other than dialogs. :\

Answer 1

It sounds like you're looking for a separate raised container for each app description, and that you want those positioned in a single column. If so, I think the element is what you want. Cards can be swipeable or static
To install in your app:
bower install Polymer/polymer-ui-card2. Import:
To Import:
There's currently a demo linked here if you'd like to see the card look and behavior: http://www.polymer-project.org/components/polymer-ui-card/demo.html
Example from GitHub:
<!--
/**
* #module Polymer UI Elements
*/
/**
* polymer-ui-card <b>(WIP)</b>
*
* Example:
*
* <polymer-ui-card>
* ...
* </polymer-ui-card>
*
* #class polymer-ui-card
*/
/**
* Fired when the card is swiped away.
*
* #event polymer-card-swipe-away
*/
-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="polymer-ui-card" attributes="swipeable noCurve"
on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}" on-flick="{{flick}}">
<template>
<link rel="stylesheet" href="polymer-ui-card.css">
<content></content>
</template>
<script>
Polymer('polymer-ui-card', {
/**
* If true, the card can be swiped.
*
* #attribute swipeable
* #type boolean
* #default false
*/
swipeable: false,
noCurve: false,
offsetRatio: 0.2,
widthRatio: 3,
ready: function() {
this.setAttribute('touch-action', 'pan-y');
this.transitionEndListener = this.transitionEnd.bind(this);
},
leftView: function() {
this.removeListeners();
},
addListeners: function() {
this.addEventListener('webkitTransitionEnd',
this.transitionEndListener);
this.addEventListener('transitionend', this.transitionEndListener);
},
removeListeners: function() {
this.removeEventListener('webkitTransitionEnd',
this.transitionEndListener);
this.removeEventListener('transitionend', this.transitionEndListener);
},
swipeableChanged: function() {
if (this.swipeable) {
this.addListeners();
} else {
this.removeListeners();
}
},
animate: function(x) {
var s = this.style;
var d = x > 0 ? 1 : -1;
var w = this.w * this.widthRatio;
var x1 = Math.max(0, Math.abs(x) - this.w * this.offsetRatio);
var r = Math.max(0, (w - x1) / w);
var y = w - Math.sqrt(w * w - x1 * x1);
var deg = (1 - r) * d * 90;
s.opacity = r;
var translate = 'translate3d(' + x + 'px,' +
(this.noCurve ? 0 : y) + 'px,0)';
var rotate = 'rotate(' + deg + 'deg)';
s.webkitTransform = s.mozTransform = s.msTransform = s.transform =
translate + (this.noCurve ? '' : ' ' + rotate);
},
trackStart: function(e) {
if (this.swipeable) {
e.preventTap();
this.w = this.offsetWidth;
this.classList.add('dragging');
}
},
track: function(e) {
if (this.swipeable) {
this.animate(e.dx);
}
},
trackEnd: function(e) {
if (this.swipeable) {
this.swipeEnd(Math.abs(e.dx) > this.w / 2 && e.dx * e.xDirection > 0,
e.dx > 0);
}
},
flick: function(e) {
if (this.swipeable && !this.away) {
var v = e.xVelocity;
this.swipeEnd(Math.abs(v) > 2, v > 0);
}
},
swipeEnd: function(away, dir) {
this.classList.remove('dragging');
this.away = away;
if (away) {
var w = this.w * this.widthRatio;
this.animate(dir ? w : -w);
} else {
this.animate(0);
}
},
transitionEnd: function() {
if (this.away) {
this.fire('polymer-card-swipe-away');
}
}
});
</script>
</polymer-element>

Answer 2

I think you are using the wrong element.
If you want the shadow effect, you can just combine normal divs with paper-shadow and core-animated-pages for transition effects