I'm having some trouble getting a footer to appear as one frame on the first page of a Pisa document, and as another frame on every other page. I have attempted to adapt the lastPage idea from here, but with no luck.
Is it possible to do this? <pdf:nextpage /> doesn't seem to be the right thing here since the document has a long table that may (or may not) flow over multiple pages. <pdf:nextframe /> plus a first-page-only frame looks promising, though I'm not sure how to use this exactly.
Currently I have (snipped for brevity):
<style type="text/css">
#page {
margin: 1cm;
margin-bottom: 2.5cm;
#frame footer {
-pdf-frame-content: footerFirst;
-pdf-frame-border: 1;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
#frame footer {
-pdf-frame-content: footerOther;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
</style>
<body>
<table repeat="1">
<!-- extra long table here -->
</table>
<div id="footerContent">This is a footer</div>
<!-- what goes here to switch frames after the first page? -->
<div id="footerOther"></div>
</body>
This places the same footer on each page. I need the same space left on each consecutive pages, but with no content in the frame.
You can define additional layouts by name, then tell xhtml2pdf to switch to them explicitly using the nexttemplate tag. I did exactly this recently to have no header on my first page but to show it on all the subsequent pages.
You should change your #page definition to two different pages, perhaps like this:
<style type="text/css">
#page {
margin: 1cm;
margin-bottom: 2.5cm;
#frame footer {
-pdf-frame-content: footerFirst;
-pdf-frame-border: 1;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
}
#page innerpages {
margin: 1cm;
margin-bottom: 2.5cm;
#frame footer {
-pdf-frame-content: footerOther;
bottom: 2cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
}
</style>
Then, in your html where you want to switch to the different layout, use a tag like this:
<pdf:nexttemplate name="innerpages"/>
The next page (and subsequent pages until you change the template again) will use the innerpages layout with your 'other' footer.
Related
I need help keeping my footer stuck to the bottom, but not overlap the upper elements either. I'm still fairly new/rusty to this since it took me 2 years to find a web job after college, so I haven't kept up as much as I should have.
Anyways,
This is the format of the html I have. I want the "footer" to be stuck at the bottom so when they scroll up from the bottom it stays. But I also don't want it to be pushed up too high to make white space below it.
I've been trying to use a "position: absolute" style for the footer to keep it on the bottom. But I just read somewhere this bumps it out of the regular flow and that's what causes overlapping.
So how can I reformat my styles to allow the footer to stay below, but not overlap?
HTML:
<html>
<header></header>
<body>
<div class="content">
<div class="hd">Content of header</div>
<div class="bd">Content of body</div>
<div class="ft">Content of footer</div>
</div>
</body>
</html>
CSS: (basic parts)
div {
display: block;
}
*, *:before, *:after {
box-sizing: inherit;
}
.hd {
position: static;
flex: 0 0 auto;
}
.bd {
position: relative;
flex: 1 0 auto;
}
.ft {
position: absolute;
bottom: 0px;
flex: 0 0 auto;
}
Just add a margin to the bottom of your body equal to your footer's height.
So if your footer has a height of say, 100px, then you need to add this to your css:
body {
margin-bottom: 100px;
}
I followed the instructions from the link that sweaver2112 suggested, and I had to remove a few duplicate elements and change others, and I finally got the footer to not overlap. Had to use flex to get it to work with the other div elements
.content {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ft {
flex: 0 0 50px;
margin-top: auto;
}
Thank you all for the support!
Link for answer purposed that I used: LINK
I think you might be looking for position: fixed;
Ex:
.footer {
position: fixed;
bottom: 0;
}
This sticks the footer at the bottom of the window regardless of the content so when you scroll the footer will always stay at the bottom. This will however be above the content (overlap), so you need to also apply AndrewL's option to keep the content from going under the footer.
I noticed the scrolling functionality is different when using a flexbox based layout vs a position: fixed footer. The fixed footer is much smoother and shows a scrollbar. Flexbox isn't smooth at all, and does not show the scrollbar. I'd much prefer to use flexbox for my layout, but want the nicer scroll. Is there any way to achieve it with flexbox?
I'm testing on IOS 10 Iphone 7. Happens on both chrome and safari
Flexbox example
Fixed footer example
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
Fixed footer method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
padding-bottom: 72px;
}
.footer {
position: fixed;
bottom: 0;
height: 72px;
min-height: 72px;
width: 100%;
background-color: blue;
}
there's nothing to do with Flexbox.it's only the problem about overflow.so add this : -webkit-overflow-scrolling: touch; will work.
I'm relatively new to web designing so hopefully what I'm writing here makes sense . . .
I have three sections on my page. A header, the middle section and the footer. Within the middle section there are three divs which include an image and text and each taking up 30% of the width of the entire middle section. When the page is decreased to smaller sizes, the footer bumps up onto this middle section. Of course, I'm wanting the footer section to remain at the bottom and be responsive.
At first I had these three divs floated left and I thought this may have something to do with the footer moving. But then I changed the divs to an inline-block.
I've also tried to clear: both. The footer keeps moving up when I scale down the page.
Hopefully, I'm making sense and someone can help. Thanks.
HTML:
<section class='mid-section'>
<div class='one-third'>
<a href='thai-tattoo.html'><img src='https://farm2.staticflickr.com/1528/26102511281_67fdc7c189_m.jpg' alt='Bangkok street'></a>
<h3>HEADLINE</h3>
<p>TEXT</p>
</div>
<div class='one-third'>
<a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
</div>
<div class='one-third'>
<a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
</div>
</section>
<div class='bottom-section'>
<div class='social-icons'>
<p > Follow us on the Web </p>
</div>
</div>
CSS:
.one-third {
width: 30%;
display: inline-block;
margin: 5% 0 0 2.5%; }
.one-third img {
width: 100%;
height: 300px; }
.one-third p {
margin: 0.5em; }
.tattoo-text {
width: 60%;
margin: 50px; }
.tattoo-h {
font-size: 25px; }
.tattoo-pic {
width: 60%;
float: right;
margin: 10px; }
.quaint-street-pic {
width: 60%;
float: left;
margin: 10px;
height: 300px; }
.social-icons {
float: right;
margin: 100px 100px 0 0; }
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle