As part of my page I have a list that I need to attach a scroll bar too. The entire page is within a paper-header-panel. If I give the paper-scroll-header-panel a height in pixels then it displays fine but otherwise, even if I set it to "width: 100%" it will not display. It seems it ought to be easier then I am trying to make it. are there any tips you can send along as to what I might be doing wrong?
David
<paper-header-panel class="flex">
<paper-toolbar>
<div>MyViewer</div>
</paper-toolbar>
<div class="horizontal layout flex">
<div class="flex">
<paper-scroll-header-panel>
<paper-toolbar>
<div>Hello</div>
</paper-toolbar>
<div>
<h4>here 1</h4>
<h4>here 2</h4>
<h4>here 3</h4>
<h4>here 4</h4>
<h4>here 5</h4>
</div>
</paper-scroll-header-panel>
</div>
<div>
<h2>Stuff</h2>
</div>
</div>
</paper-header-panel>
Your paper-scroll-header-panel displays fine if you display it by itself. Maybe this is why it's not displaying in your sample:
The documentation for paper-scroll-header-panel says:
Important: The paper-scroll-header-panel will not display if its parent does not have a height.
https://elements.polymer-project.org/elements/paper-scroll-header-panel
Related
I have div(class: review-tiems-container) with some items, on flex-direction:column they all show up, on flex-direction:row first one completely and some part of the second item disappear from screen, even when moving with mouse over mobile resolution.Even from editor mode hovering over their element, it shows empty space on dom.
this is how html looks, those item have inside content aswell but removed to reduce code length
<div id="reviews">
<h1 class="reviews-header">
Hear what our customers
<span>
are saying
<img class="why-underline" src="./Imgs/why/headerunderline.png"/>
</span>
</h1>
<section>
<div class="review-info-bar">
<div class="review-numbers">
</div>
<button class="review-btn">
</button>
</div>
<div class="review-items-container">
<div class="review-item">
</div>
<div class="review-item">
</div>
<div class="review-item">
</div>
<div class="review-item">
</div>
</div>
</section>
</div>
I tried different overflow options, none of them work
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.
So I have a custom element called my-element and within that element I have a repeating template that displays a bunch of custom elements called my-card. So I was using inline-block to divide the cards in two columns and that worked but since the cards were of different heights there was some ugly white space in between. As per a suggestion from user here on stackoverflow I used column-count to make it work. Visually, it worked but the my-cards on the right column are not interactive.
If I hover under the first column, I can click the my-cards that are supposed to be in the second column.
Despite it not showing in the image above, the my-cards will be of different heights so I need to have a masonry layout. One column in mobile screen width and two columns in tablet+. How can I achieve that?
Here's the code: http://pastebin.com/NFv6ed2T
I don't see any repeats or anything, but why not change your code to use horizonal and vertical layouts? Remove all excess styling except for that.
And the <section> tag probably isn't necessary.
Assuming you include the iron-flex-layout code somewhere...
working code w/simple styling: http://jsbin.com/cetece/1/edit?html,output
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
This is an example if you need to have the buttons wrap into one row if the container is too small for 2 rows: http://jsbin.com/cetece/2/edit?html,output
Add wrap class to the rows and adjust the styles for a fixed button size and non-fixed wrapping container.
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
If you need the buttons to go be able to all align horizontally if needed then simply remove all of the row containers, and the vertical layout container, and place all paper-buttons in one single container, such as the paper-material.
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>
...