Due to stacking context issues with app-header-layout I had to remove that component completely and use <app-header condenses reveals> by it's own.
My issue is that the header condense, sticky and reveal behaviors are not working as expected and doing weird things.
<!-- <app-header-layout has-scrolling-region> -->
<app-header condenses reveals effects="waterfall">
<div id="pageToolbar">
<!-- Various global stuff, logo, search, social links -->
</div>
<div id="pageHeader" sticky>
<!--
Dynamic content that changes based on the page,
normally contain tabs, and should therefor be sticky
-->
</div>
</app-header>
<div id="content">
<!-- Actual content -->
</div>
<!-- </app-header-layout> -->
Issues
The header scrolls out of view way too fast, leaving a visible gap between it and the content.
Scrolling back up doesn't reveal, until you reach the top; You see the gap again, before the header slides fully into place.
The sticky element doesn't stick.
All of this worked as expected inside app-header-layout.
App Layout version
"app-layout": "PolymerElements/app-layout#^0.10.6",
It's certainly because the <app-header-layout> element was defining some styles that makes the <app-toolbar> work.
Copy the styles defined in the example linked and it should work better.
Don't forget to add :
the is="custom-style" attribute in <style>,
the fixed attribute in <app-header>,
the { padding-top: [your-header-size] } CSS rule to your #content div.
<style is="custom-style">
body {
margin: 0;
}
app-header {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100px;
color: white;
background: dodgerblue;
}
div#content{
padding-top: 100px;
}
</style>
Related
I have a custom hellobar in the main template of a website. I would like to move it from the main template to inside a particular page.
This is a hellobar that popup 5 seconds after the page is loaded. Please note that I remove all the javascript part to simplify. If I change hellobar-wrapper to position: absolute or fixed the div is positioned on top of the page but over the header. I would that initially the header is on top and when the hellobar is displayed it shift the header below the bar, so the header is still visible.
HTML:
<!-- Remove hellobar from here -->
<!--<div id="hellobar">Hellobar here</div>-->
<!-- /hellobar -->
<!-- Header -->
<div id="header">
Header here.
</div>
<div id="content">
<!-- hellobar should be here -->
<div class="hellobar-wrapper">
Hellobar content here
</div>
<!-- /hellobar -->
<!-- More content here -->
<div>
more content here
</div>
</div>
</body>
CSS:
.hellobar-wrapper {background-color: #fff; padding: 10px 0px; position: static; top: 0; width: 100%; z-index: 1; border-bottom: 1px solid #eee}
I would suggest to you to add the following to the hellobar-wrapper class in css:
display: none;
Moreover, create in css the following class:
.active {
display: block;
}
Finally, add to your code in Javascript, the following when you load wrapper after five seconds:
$(".hellobar-wrapper").addClass("active");
The code above uses jQuery, therefore add the following in your html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
In this way, after five seconds with JavaScript you will display the wrapper correctly, adding the class .active, and you will hide it before the five seconds by default with the css. Please also invert the position of header and wrapper. The wrapper, indeed, will be not visible before the 5 seconds, and the header will be on top. After five seconds, the header will shift since wrapper will be visible
I want my footer to be a sticky footer and tried following the css tricks negative margin trick, but did not work. I tried to impersonate my angular2 app in the below plunker code. I want the sticker not be fixed but sticky and go to the bottom when there are more content available in the main section. Note the footer is displayed above the data in the main section.
http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts
app.component:
<nav-bar></nav-bar>
<section class="main">
<div class="main-container">
Display my router-outlet here
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
</div>
</section>
<footer-component></footer-component>
Any help to fix and move the footer down is appreciated.
You can still follow this example mentioned by
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Simply add this code to styles.scss
html,
body {
height: 100%;
}
In your app.component.scss
:host {
display: flex;
min-height: 100%; // used percent instead of vh due to safari bug.
flex-direction: column;
}
.Site-content {
flex: 1;
}
In your app.component.html
<header>...</header>
<main class="Site-content">..</main>
<footer>...</footer>
There are several ways to achieve this. I'm assuming you've tried one of these: CSS-tricks - Sticky footer, five ways.
For that to work, you would need to:
Remove absolute positioning of both the footer and the content.
Remove default top and bottom margins from body.
If you are not going with the flexbox or grid option, then place all content except for the footer inside of one element (so you can make sure the total height of that element plus the footer is at least the height of the viewport).
Here is an implementation of your Angular2 app with a sticky footer.
The sticky footer is achieved by wrapping all of the main content in a single div and using calc() to set it's minimum height to 100vh minus the footer's height.
I think it's not a good idea to make position:absolute for your .main block. Absolute positioning for your footer will be enough.
Try something like this
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
min-height: 100%;
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
}
Also remove margins and padding-top from .main block styles
You just have to edit 2 files:
index.html:
<!-- Full height body -->
<body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
<app-root class="d-flex flex-column h-100"></app-root>
</body>
app.component.html:
<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>
I am using Polymer paper elements. I need two toolbars for my page, one at top and other at bottom. How do I make the other one.
I have looked here for answer. But that is a core-toolbar and I am using v1.0. Still on using .bottom, the toolbar remains on top.
Thanks
I like to use Flexbox for things like this. Here's an example with paper-header-panel:
<paper-header-panel>
<paper-toolbar><span>Top Toolbar</span></paper-toolbar>
<div class="layout vertical fit">
<div class="layout flex">content</div>
<paper-toolbar><span>Bottom Toolbar</span></paper-toolbar>
</div>
</paper-header-panel>
Note that this is using iron-flex-layout & you should probably use the mixin version of layout styles instead of the classes directly as I've done here (i.e. #apply(--layout-vertical), etc) or use flexbox styles directly.
The .bottom in the paper-toolbar documentation is intended to align items within the toolbar. If you want to make the toolbar itself bottom aligned, you'll need to style the paper-toolbar element and its container.
Styles:
<style>
.container {
position: relative;
}
paper-toolbar.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
HTML:
<div class="container">
<paper-toolbar></paper-toolbar>
<paper-toolbar class="bottom"></paper-toolbar>
</div>
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
I'm trying to create a site very much like in this picture:
Layout Image on Dropbox
The Problem:
I need the site to scroll horizontally, as suggested in the image.
I also need the vertically scrolling elements to scroll, but inside the element itself, not the entire site. When I scroll up/down in the first frame of the site, it scrolls down to a blank area because the second frame is so tall and forces the entire site to be as tall as the tallest element.
HTML structure:
div #horizontal-container
div #horizontal-wrapper
div #section-1 .section
div #section-2 .section
div #section-3 .section
so on...
CSS:
html, body {
overflow: hidden;
}
#horizontal-container {
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
overflow-y: hidden;
overflow-x: scroll;
}
#horizontal-wrapper {
width: 400%;
height: 100%;
}
.section {
width: 25%; /* A quarter of its parent with 400%, to be 100% of the window. */
height: 100%;
float: left;
overflow-y: scroll;
}
Hopefully I made it clear here. What am I missing to get this working? Should I maybe incorporate a little JavaScript to toggle the overflow property of the container when I hit certain horizontal scroll points? That sounds messy. :/
height=100% will not introduce scroll to sections
You have to assign different heights to sections based on there content.
Check by javascript If height of section is more than window height then assign window height to the section height.
You can try this code to generate fixed width content blocks with horizontal scroller. You can see the parent post here
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>