I would like to render HTML to PDF. To get this working, I make use of Browsershot, which uses a headless Chrome to render the HTML and CSS.
This is my additional style to fit A4-format:
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<!-- Styles -->
<link href="{{ asset(('/css/app.css')) }}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
<style>
#page {
size: A4;
margin: 11mm 17mm 6mm 17mm;
}
#media print {
#footer {
position: fixed;
bottom: 0;
}
.unbreak-element {
page-break-inside: avoid;
page-break-after: avoid;
}
/* html, body {
height: 297mm;
}*/
}
</style>
</head>
This is my footer, which is included:
<div class="grid grid-cols-3" id="footer">
<address class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</address>
<div class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</div>
<div class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</div>
</div>
My problem is: Very large elements are now overlapping the footer-section like this:
My question: How can I avoid overlapping and break the table to the next page?
There is an answer that answers a similar question that references an article that might help you along.
The gist of it is that you need tables to get space reserved at to bottom for a fixed footer:
.main-footer .inner {
bottom: 0;
position: fixed;
}
<table>
<tbody>
<tr>
<td>
<header>
<h1>Page Title</h1>
</header>
<p>Lorem ipsum...</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<footer class="main-footer">
<div class="inner">
<small>© YEAR AUTHOR</small>
</div>
</footer>
</td>
</tr>
</tfoot>
</table>
This is not ideal since these are not semantic tables. I managed to get CSS tables to work in firefox like so:
body {
display: table;
}
.main-header,
.main-body {
display: table-row-group;
}
.main-footer {
display: table-footer-group;
}
<header class="main-header">
<h1>Page Title</h1>
</header>
<div class="main-body">
<p>Lorem ipsum...</p>
</div>
<footer class="main-footer">
<small>© YEAR AUTHOR</small>
</footer>
However once I tried to fix the footer to the bottom position with
<footer class="main-footer">
<div class="inner">
<!-- footer content -->
</div>
</div>
.main-footer {
display: table-footer-group;
}
.main-footer::after {
content: "";
display: block;
height: 2em;
}
.main-footer .inner {
bottom: 0;
display: block;
position: fixed;
}
...firefox the footer is painted twice (with a slight offset). I believe this is a browser bug.
All the while CSS tables won’t work in chrome at all (I also believe this is a bug).
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I have some simple html and css styling and I am creating a site with articles and pictures. I don't understand why my third picture isn't aligned with the other photos. It's slightly higher, though it seems like the same size. How can I get it to to be aligned properly? I don't believe I'm doing anything differently with my third article/picture, so I don't understand why it looks different.
index.html
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(dog.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(chocolate.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(cat.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
There's a few issues going on here, like duplicating an ID. That being said, you can get what you want by adjusting the width and using vertical-align: top;
Fiddle here: https://jsfiddle.net/harcfs0u/40/
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(dog.jpg)"></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(chocolate.jpg)"></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(cat.jpg)"></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br /><br />
<center>©2017<br />
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif;
font-weight: 300 !important;
margin-bottom: 0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
.top-stories {
vertical-align: top;
}
section {
padding: 0;
margin: 0;
max-width: 32%;
display: inline-block;
}
article {}
.article-image {
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
In the section class of CSS file, Try using display property with inline-flex. I am attaching you stackblitz link here.
https://stackblitz.com/edit/js-c9mqfu
section {
max-width: 33%;
display: inline-flex;
}
The reason is that the vertical alignment of inline-blocks is by default at their baseline, which in this case is the last line of your text. To fix that, add vertical-align: top to the CSS for section:
section {
max-width: 33%;
display: inline-block;
vertical-align: top;
}
(And as I wrote in the comments, don't use an ID more than once - use a class instead)
u can know the differ between grid and flex in this link differ between flex and grid
section {
max-width: 33%;
display: inline-flex; // or used display: inline-grid;
}
I just removed extra text in 3rd image p and then your code worked fine
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://upload.wikimedia.org/wikipedia/commons/7/70/Chocolate_%28blue_background%29.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location ... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
I am trying to create a footer for my simple webpage and am having some trouble with an element, which is over extending over the edge of the container. I assume this is a problem with the width.
I am trying to get the <hr> tag to extend the entirety of the width of the column. For reference I am using the MaterializeCSS framework for the containers, rows and columns.
Code
HTML:
<div class="container">
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
CSS:
.footer-message{
position:absolute;
width: 100%;
padding:5px;
bottom:0px;
}
I am using a position of absolute to enable to align it to the bottom of the screen and I set the width to be 100% as I understand that it would inherit the width of the parent which in this case, is a div with a class of container.
What am I doing wrong? Thank you in advance!
Edit: Old screenshot
Add position: relative to the Container, then add left: 0; right: 0 to footer-message class.
Hope it help
I would use CSS Grid for this, see the following snippet:
html,
body {
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
header {
background: #5170a9;
color: white;
padding: 1rem;
}
main {
color: #444;
padding: 1rem;
}
footer {
background: #182f58;
color: white;
padding: 1rem;
}
<article>
<header>
Page Header
</header>
<main>
Hi, there's not much content, yet. You can write in here to expand the container.
</main>
<footer>
All rights reversed.
<br>
I am always at the bottom of the page
</footer>
</article>
make your footer like in the materialize documentation example: https://materializecss.com/footer.html
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
</div>
</div>
</footer>
I tried to reproduce it, but your code without the CSS works fine for me. I am not sure if you want the <hr> to fill the whole width of just the container width.
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<main>
<div class="container">
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
</main>
<footer>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I can force this layout with a table, but I think the best practice may be some display/float settings in CSS. I have a header and menu section that are working as desired. Below them are top, middle, and bottom sections that are wrapping ugly. The top section should have an image followed by a block of text. The middle section should have 3 equal blocks of text. The bottom (footer) should have 1 equal block of text. Is there a clean way to do this without stuffing it into a table? Here's what I'm doing so far and as I say it's ugly:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<header>
<span class="HeaderTitle">My header info</span>
</header>
<nav>
<!-- the menu is working fine -->
</nav>
<main>
<style>
.MyArticle
{
width: 30%;
display: inline-block;
float: left;
margin: 8px;
}
</style>
<div class="jumbotron">
<img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
</body>
</html>
Here's one way. You just need to clear your floats, basically. Here's some reading on CSS Floats:
All About Floats
CSS Floats 101
Mysteries of the Float Property
* {
box-sizing: border-box;
}
.jumbotron img {
border: solid 1px black;
margin-right: 14px;
}
#MiddleSection {
clear: left;
margin: 0px auto;
}
.MyArticle {
width: 33%;
display: inline-block;
text-align: center;
background: grey;
}
footer {
clear: left;
text-align: center;
}
<header>
<span class="HeaderTitle">My header info</span>
</header>
<main>
<div class="jumbotron">
<img src="/Images/Photo.jpg" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
Though most people don't usually make content on their websites full-width (expand the Snippet to full screen to see what I mean).
Another way that's better/simpler for modern browsers is to use the Flexbox method (not really an option if you have to support IE8 or IE9, etc.).
As we can see from the image my content overlaps with the header image and this is the code I have:
<style type="text/css" media="print">
#page {
/*size:landscape;*/
#top-center {
content: element(header);
}
#bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div class="header">
<img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">
</div>
P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.
Headers and footers are established within the page margins.
So the solution is to increase the page top margin, for example:
#page {
margin-top: 50mm;
}
Method to implement header footer properly in PDF
After finding a lot on internet on different solutions and workaround, I'm finally sharing a way that works for me.
Please add these style to report container (the div in which report is rendered).
<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>
// Div properties may differ
Wrap the Doc component into the table structure with thead and tfoot according to the size of your header and footer(table is wrapped inside a div).
<div style="width: 100%;">
<table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
<thead class="page-break-before">
<tr>
<td>
<div style="height: 80px;"></div> // space for the respective header
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> Your Data Goes Here........</div>
</td>
</tr>
</tbody>
<tfoot class="show-in-print page-break-after">
<tr>
<td>
<div style="height: 130px;"></div> // space for the respective footer
</td>
</tr>
</tfoot>
</table>
</div>
Sample Header and footer
<div class="page-break-before">
<div>A long header content...</div>
</div>
<div class=" page-break-after">
<p> A long footer content...</p>
</div>