I am building an SPA polymer 1.0 app that looks like this:
<iron-pages attr-for-selected="data-page"
selected="{{page}}">
<div data-page="home">
<paper-header-panel mode="{{mainMode}}">
<profile-toolbar></profile-toolbar>
<div class="content">
<search-menu></search-menu>
</div>
</paper-header-panel>
</div>
<div data-page="search">
<paper-drawer-panel ...>
...
</paper-drawer-panel>
</div>
</iron-pages>
<profile-toolbar> is a custom element that contains a <paper-toolbar>. If I leave out the <paper-header-panel> it works, but there's a padding and the scrolling doesn't work right. So I added a <paper-header-panel>.
The second page also contains a <paper-header-panel> inside the drawer and works correctly, but I can't make the first page display anything if it contains a <paper-header-panel>. What am I missing?
Try adding following css class to divs that are direct parents of your paper-header-panels:
.content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Here is a solution you might try.
Note this open bug that has (apparently) been resolved for all except iOS (Safari).
Related
I am having issues with my sticky table header in my angular 6 project.
I have a condition in my .ts file that applies the 'sticky' class only when the user scrolls towards a certain point in the page. That part works great. The issue is that when the position: fixed class is applied, it only works if top:0.
The css looks like this:
.sticky
{
position: fixed;
top:0;
width: 100%;
background-color: #fff;
padding-right: 20px!important;
}
But if I change top:0 to top:100, too account for the header of the webpage (that is build on another component) then the top:100 attribute won't apply and be considered invalid.
The html is a little tricky but looks a little like this
child.component.html
<div>
<navigation></navigation>
<div>
</div>
<div class="table-responsive " >
<table id="tabletop" #tabletop class="table scroll">
<thead #stickyMenu [class.sticky]="sticky">
<tr id="content" class="row1">
<tr id="content" class="row2">
<tr id="content" class="row3">
</thead>
</table>
</div>
</div>
app.component.html
<header></header>
<app-child></app-child>
<footer></footer>
I want the thead to stick right underneath the header that lives on a parent component, so it is still visible.
Why is that, and how can I get my position:fixed attribute to actually keep something at the top of the page?
Any help is greatly appreciated!
I wanted to post this by comment, but looks like I need at least 50 reputation to do so. So, here it goes:
But if I change top:0 to top:100 {...}
The unit of the top seems to be missing. You probably wanted to set it to 100px? Probably the 0 value confused you as it is allowed with or without a unit.
One more thing, the id of each element must be unique, but you have 3 id="content" there.
Alternative solution
You can use position: sticky css property on your thead element (and also on the respective th child elements). This way, you wouldn't need to handle the scroll event by yourself and let the css do the job for you.
Example:
I only include the scss part here, since the code snippets make the post unnecessarily long. You can see full example on stackblitz.com.
thead {
position: sticky;
top: 0px;
tr {
position: sticky; top: 0;
/* the top value can be adjusted according to <header>'s height */
&:nth-child(1) th { position: sticky; top: 110px; }
&:nth-child(2) th { position: sticky; top: 132px; }
}
}
I'm in a phase of adding router transitions to the angular application and I'm facing weird problem. Styling for router-outlet gets applied to the element below it in the DOM hierarchy.
Here's my code:
<main role="main">
<!-- Header -->
<app-header class="topnavbar-wrapper"></app-header>
<!-- Page content-->
<div [#fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</div>
<!-- Footer -->
<app-footer></app-footer>
</main>
Styling:
main {
box-sizing: border-box;
margin-top: 4.5rem;
min-height: 92vh;
padding-bottom: 4rem;
/* Height of footer */
position: relative;
}
router-outlet ~ * {
position: absolute;
height: 100%;
width: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: $secondary;
}
Animations work smoothly, I have no problem with that. But the router-outlet styling is applied to element below it and this makes footer fixed at the bottom, overlaying the content. If I clear styling of router-outlet element then animation won't work correctly.
As you can see on the screen <app-overview> element has router-outlet styling which is what causes the problem. I guess that solution lies in correct scss styling but so far I wasn't able to figure it out.
The selector router-outlet ~ * selects all of the router-outlet siblings, that's why it applies on app-overview.
Also you shouldn't try to style a router-outlet since it is not rendered (it's just a placeholder)
I was working on an Ionic Project which primarily uses Angular, I wanted to style router outlet to follow my CSS grids applied, ion-router-outlet didn't work out, so I used router-outlet and it worked fine. Related to the question but not that specific, might help someone out there.
I'm trying out Polymer for the first time.
I have the following css on the index file:
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
height: 100vh;
background-color: #eeeeee;
}
You can see that the height is explicitly sized.
Then, there's the CSS of the page I'm having issues with iron-list:
:host {
padding: 10px;
display: flex;
flex-direction: column;
height: 100vh;
#apply(--paper-font-common-base);
}
iron-list {
flex: 1 1 auto;
--iron-list-items-container: {
max-width: 800px;
margin: auto;
margin-top: 5px;
margin-bottom: 60px;
border-bottom: 1px solid #ddd;
};
}
You can also see that I'm trying to use flexbox for the height of the iron-list.
I have a simple iron-ajax to populate the list. Theres 81 records on the JSON file.
<iron-ajax id="getVehiclesAjax"
url="../data/vehicles.json"
handle-as="json"
auto
on-response="handleVehiclesResponse"
on-error="handleVehiclesError"></iron-ajax>
The list is also pretty simple:
<iron-list id="list" scroll-target="document" items="[[vehicles]]" as="item" selection-enabled>
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
<div class="pad">
<div class="primary-text">[[item.modelo]]</div>
<div class="shortText">[[item.placa]]</div>
<div class="longText">[[item.chassi]]</div>
</div>
</div>
</div>
</template>
</iron-list>
Expected outcome
The iron-list should render all items, after all, the size is explicitly sized on the parent component, and the scrolltarget on the list is defined to the document. Also, the list has the flexbox setting on the css.
https://elements.polymer-project.org/elements/iron-list
Actual outcome
When I load the page, only 27 records are rendered, although the list height is sized accordingly with the rest of the elements that are not appearing.
I tried to add a button and call this: this.$.list.fire('iron-resize');
But it didn't worked. Resizing the window manually also doesn't do anything.
The only thing that worked, was removing this attribute from the iron-list:
scroll-target="document"
But if I remove it, there's a scrollbar showing for the iron-list, and a scrollbar for the document...
How can I solve this? I want only one scrollbar (document) and the items to be always rendered...
I managed to fix it. Digging up the code, I've found this property:
has-scrolling-region
... on the app-header-layout that was encapsulating all iron-pages. I removed it and now everything works as expected, the rendering of items as I scroll, and only one scrollbar (on the owner document).
Is it possible to place an Html element outside of a newly generated one?
Well, I have an IONIC2 app that generates a new element <scroll-content>, the issue is that this element has some CSS properties that affects the child elements.
So, what I would like to do it either to place that my div element outside of that <scroll-content> or even better to disable the CSS properties of <scroll-content> on the div
Here is the code, so I can make things clearer:
HTML
<ion-content id="contentPadding">
<div class="header">
</div>
</ion-content>
When Ionic renders the above code, the browser generate something like this:
HTML
<ion-content id="contentPadding">
<scroll-content>
<div class="header">
</div>
<scroll-content>
</ion-content>
CSS:
.top{
background:black;
}
//generated
scroll-content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
I guess, it's clearly shown that a new element called <scroll-content> is being created and <div class="header"> inherits all the css properties of <scroll-content> which I would like to avoid in my case.
Your header (child) is inheriting its parent's (scroll-content) CSS styling. You need to clear any unwanted inherited rules by explicitly changing the inherited styles. For example, if you want to reset the css-display, write
.header {
display: initial;
}
Hopefully in the future we can avoid this with the all:initial trick - however, it currently isn't supported enough.
I understand that the problem is likely related to the core-header-pannel parent not having a height.
Important: The core-header-panel will not display if its parent does not have a height.
This works fine:
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel {
height: 100%;
}
</style>
<body unresolved>
<core-header-panel>
<div class="core-header">standard</div>
<div class="content"></div>
</core-header-panel>
</body>
However, when I try to change the core-header-pannel to mode "waterfall-tall", then the header panel does not show.
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel.tall{
height: 100%;
}
</style>
<core-header-panel mode = "waterfall-tall">
<div class="core-header">waterfall-tall</div>
<div class="content"></div>
</core-header-panel>
During the course of my "experiments" I've referenced both https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel and https://www.polymer-project.org/components/core-header-panel/demo.html
After viewing various StackOverflow questions I think that somehow the body is now covering the header-pannel, because I'm no longer explicitly setting the height. FYI, I'm totally new to HTML and web development. Any suggestions would be appreciated.
To be clear, my questions are:
The parent element of the core-header-panel is the body correct?
Am I referencing my <core-header-panel mode = "waterfall-tall"> in my <style> section properly?
How can I get this darn header pannel to appear?
update edit:
OK, I found a solution through experimentation with the demo.html of core-header-panel. It works fine on my local host, ie, the header collapses and expands how I expect it should. However, when I paste into jsbin, then I do not get the collapsing effect that I want.
http://jsbin.com/cufefi/1/edit
I think this is due to the utilization of px in the <style> section, but I'm not sure.
Another question: My imports are relative, so how can jsbin resolve the imports?
second update edit:
The behaviour is the same with or without the imports, which implies to me that the imports are not resolved, and this is why the behaviour is different when compared to the behaviour on my local host.
Here you lost the < body > tag, just before the core-header-panel tag. Could be this the error?
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel.tall{
height: 100%;
}
</style>
<core-header-panel mode = "waterfall-tall">
<div class="core-header">waterfall-tall</div>
<div class="content"></div>
</core-header-panel>