Why is my z-index being ignored?
<core-drawer-panel>
<div drawer>
Test
</div>
<div main>
<core-icon-button core-drawer-toggle icon="menu" style="z-index:1000 !important;"></core-icon-button>
<my-element style="z-index:-1000 !important;"></my-element>
</div>
</core-drawer-panel>
my-element has <core-animated-pages fit> and it does not care at all about the z-index? Its stays on top all the time?
EDIT:
z-index:1000 !important does not work.
But in my-element I can do this <core-animated-pages fit selected="{{subPage}}" style="overflow:auto; z-index:-1;"> but then the overflow does not work meaning I see a scroll bar but it does not scroll?
(https://github.com/Polymer/core-animated-pages/issues/36)
Add position:relative as well as a z-index on elements. If you don't explicitly set a position, the z-index does not work (also for 'normal' HTML).
Related
everyone!
I wanted to use paper-header-panel with mode waterfall and custom element 'iron-swipeable-pages'. My code looks somehow like this: (it is not the exact copy, just the structure)
<paper-drawer-panel id="drawer" force-narrow>
<div drawer>
<!-- Drawer panel -->
</div>
<div main>
<paper-header-panel id="paperHeaderPanel" mode="waterfall">
<paper-toolbar id="appbar">
<!-- Toolbar content -->
</paper-toolbar>
<iron-swipeable-pages
padding="16"
id="ironSwipeablePages"
edge-swipe-sensitivity="30"
selected="{{selected}}">
<div id="overview">
1
</div>
<div id="timetable">
2
</div>
<div id="teachers">
3
</div>
<div id="calendar">
4
</div>
</iron-swipeable-pages>
</paper-header-panel>
</div>
</paper-drawer-panel>
The <div> elements inside <iron-swipeable-pages> are scrollable but when I scroll them the waterfall effect on paper-header-panel isn't working.
I tried this:
this.$.paperHeaderPanel.scroller = this.$.overview;
In ready script of element because I saw that property isn't marked as read-only in element reference. However, it does not work. Do you have any ideas how to make waterfall effect work?
I am building a full-screen app with Polymer. Currently, I've defined my layout like this:
<body unresolved class="fullbleed">
<template is="dom-bind" id="app">
<paper-scroll-header-panel fixed>
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</paper-drawer-panel>
</paper-scroll-header-panel>
</template>
</body>
The view in <div main class="content"> looks like this:
my-view.html
<dom-module id="project-view">
<template>
<neon-animated-pages class="flex" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<!-- Page 1 -->
<div>
<paper-header-panel mode="seamed">
<div class="paper-header">
<paper-toolbar class="view-toolbar">
<paper-icon-button icon="menu"></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="menu"></paper-icon-button>
</paper-toolbar>
</div>
<div class="content">
<paper-material elevation="2">
<h1>Welcome</h1>
<p>
This will be a BIG text block that require scrolling. The toolbar should always be visible. The "paper" should scroll under the toolbar like a Google Doc
</p>
</paper-material>
</div>
</paper-header-panel>
</div>
<!-- Page 2 -->
<div>
<paper-material elevation="2">
<p>Another page</p>
</paper-material>
</div>
</neon-animated-pages>
<script>
Polymer({
is: "my-view",
ready: function() {
this.selectedPageIndex = 0;
}
});
</script>
</template>
</dom-module>
When I run this page, the content under the toolbar will not scroll. It stays fixed in position. I do not understand why. How do I create some paper under a toolbar so that it scrolls beneath the toolbar like Google Docs?
Update:
Main layout changed to:
<paper-header-panel class="flex" style="background-color:lightcoral;">
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<div class="flex content" style="background-color:lightsalmon;">
<div class="horizontal layout">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</div>
</div>
</paper-header-panel>
The content scrolls. However, the content of the paper-drawer-panel does not fill the remaining area below the toolbar. I do not understand why. It's like the iron-flex-layout stuff isn't working. What am I doing wrong?
My guess is that it has something to do with the paper-drawer-panel being inside of the paper-scroll-header-panel element. On top of that likely being the culprit, you should consider that if you do have the paper-drawer-panel inside of the paper-scroll-header-panel, it will scroll with your content.
I would try either removing or moving the paper-drawer-panel to start with, and then adding it back in once you have the scrolling working.
I'm not sure if this is already implemented, but this blog post might help you as it explicitly mentions the paper-toolbar together with flex layout :
https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
So you could try using mixins instead of the flex-class.
Try to use paper-dialog-scrollable. All you have to do is set width and height of the scroll area. Works with static and dynamic content.
I have an issue, when i try to load content into my element, it is always has height = 0, i need element to be sized by content size, is there any suggestions?
There is my template
<template>
<paper-dialog id="dialog" modal>
<h2>{{_computeTitle()}}</h2>
<paper-dialog-scrollable id="main">
<content id="form" select=".content"></content>
</paper-dialog-scrollable>
<div class="buttons">
<content select=".buttons"></content>
</div>
</paper-dialog>
</template>
why are you using a scrollable dialog inside of a dialog? You should use a dialog and give the children the position: relative property.
I'm working with a icon button which is placed in a scroll header panel. Even though I explicitly added a rule for the width, it is still showing up as 100% width:
What is so strange is that if I move the button and place it into the content of the page, the size is right again. I just can't figure out what is messing up the width.
Relevant code:
<paper-drawer-panel transition>
<div drawer></div>
<paper-scroll-header-panel class="flex" condenses main>
<paper-toolbar class="tall">
<paper-icon-button icon="menu" title="menu" paper-drawer-toggle></paper-icon-button>
<div class="bottom title">Title</div>
</paper-toolbar>
<div class="content">
</div>
...
<core-toolbar class="tall" horizontal start-justified layout>
<div class="logo"><img src="assets/logo.png"></div>
<h1 class="bottom">Company name</h1>
</core-toolbar>
In the above code I have horizontal start-justified layout which mean the element within core-toolbar align to left.
Now I want to change the start-justified to center-justified when screen size below 700px. How to do that with core-media-query ?
Can we just wrap the code to <core-media-query> or we have to create a custom element?
if you have a auto-binding template on the index file there is no need to do it in a custom-element. also polymer has the ability to check attributes against a boolean by using the attribute?="{{value}}" syntax. in the case below start-justified?="{{!queryMatches}}" means that if the page is more then 700px in width queryMatches will be false and content will justify left. while center-justified?="{{queryMatches}}" means that if the page is smaller then the 700px in width queryMatches will be true and content will be center-justified
it would look something like
<template is="auto-binding">
<core-media-query query="max-width:700px" queryMatches="{{queryMatches}}"></core-media-query>
<core-toolbar class="tall" horizontal start-justified?="{{!queryMatches}}" center-justified?="{{queryMatches}}" layout>
<div class="logo"><img src="assets/logo.png"></div>
<h1 class="bottom">Company name</h1>
</core-toolbar>
</template>
here is it working http://plnkr.co/edit/VYdFOt89E6RH7fTTlZ5m?p=preview
edited for completeness