Am using mpdf.
I want to set footer with some extra line only on first page.
and only page number on second onwaords lines.
which we generally follow in continuation sheet concept of letters.
I looked in mpdf manual but seems there is no way for this.
Do anybody have solution for this?
You may control headers and footers of the generated PDF with CSS and the #page model.
See mPDF Documentation about using #page
Here is a very simple CSS and HTML to generate a PDF with different headers and footers for the first and the following pages using #page and named headers and footers:
CSS
#page {
header: html_header;
footer: html_footer;
}
#page :first {
header: html_header-firstpage;
footer: html_footer-firstpage;
}
HTML
<htmlpageheader name="header-firstpage" style="display: none;">
<p>This header appears on the first page only</p>
</htmlpageheader>
<htmlpageheader name="header" style="display: none;">
<p>This header appears on the following pages</p>
</htmlpageheader>
<htmlpagefooter name="footer-firstpage" style="display: none;">
<p>This footer appears on the first page only</p>
</htmlpageheader>
<htmlpagefooter name="footer" style="display: none;">
<p>This footer appears on the following pages</p>
</htmlpageheader>
<h1>The content of the document</h1>
<p>Yadda... yaddaa... blah... blahh</p>
The space before ":first" selector in the CSS is needed.
First use the following at the beginning inside the body tag like so:
<htmlpagefooter name="firstpage">First page</htmlpagefooter>
<htmlpagefooter name="otherpages">Page {PAGENO} of {nb}</htmlpagefooter>
Then within the content of your first page use this :
<sethtmlpagefooter name="firstpage" value="on" show-this-page="1" />
To allow setting the rest of the pages use this after the content of the second page:
<sethtmlpagefooter name="otherpages" value="on" />
How this works is that the sethtmlpagefooter with the value on serves to notify mPDF when to start using the footer or when to stop at any point within your document, you can therefore use:
<sethtmlpagefooter name="otherpages" value="off" />
To disable the footer rendering at any point within the document. Please note that I use the html tag: <div class="page-break"></div> with css code .page-break {page-break-before: always; } To forcefully break the pages of my document therefore controlling which content goes to which page and ultimately controlling when the footer will be displayed for each page.
Here is an example in use:
<html>
<head>
<style>
.page-break {page-break-before: always; }
</style>
</head>
<body>
<htmlpagefooter name="firstpage">First page</htmlpagefooter>
<htmlpagefooter name="otherpages">Page {PAGENO} of {nb}</htmlpagefooter>
<p>Some varying content of my first page.</p>
<p>Some other content still on the first page</p>
<sethtmlpagefooter name="firstpage" value="on" show-this-page="1" />
<div class="page-break"></div>
<p>Some varying content of my second page</p>
<sethtmlpagefooter name="otherpages" value="on" />
<div class="page-break"></div>
<p>This content will show on the third page</p>
</body>
</html>
Related
I have a very wide element, #widelement inside a bootstrap row col. I would like to enclose it on a div, .mywrapper, with a horizontal scroll bar in order to keep page layout.
Someone can explain to me what style I should add to .mywrapper to avoid that #widelement overflows the bootstrap col?
In this sample, the wide element has a 5000px width, but, this is not a fixed number, can be bigger or smaller, also smaller than col size.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
What I tried unsuccessfully:
.mywrapper {
overflow-x: scroll;
}
Testing your solution I ended up with this snippet:
.mywrapper {
overflow-x: scroll;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
It turns out that the very code you have suggested works. So, something prevents it from working at your end, which could be one or more of the following:
client-side cache (your browser temporarily stores your css and js files in order not to have to download them each time you load a page and it's possible that when you have tested, the cached old version of your CSS was loaded by a locally cached file by your browser instead of downloading it from the server), Ctrl+F5 (or even clear browser cache or even testing in a freshly opened incognito window) sorts this out
server-side cache (CloudFlare or some other server-side software generates static files periodically and sends those out to the browser upon page load rather than generating the response upon each request), in which case, you need to clear the server-side cache while you are testing
you forgot to save the code when you have edited it
you forgot to deploy it on the server
the wrong file was edited
the right file was edited, but it was wrongly not included into the HTML
some higher prio CSS rule prevented the overflow-x rule from being applied (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
So, your idea was correct, but something prevented it from providing the benefits you have expected. The issue therefore is something technical at your project and you will need to troubleshoot the potential issues listed above. If it still does not work at your end, then you will need to edit your question with more information and let the answerer(s), including myself know about the additional information.
I need to update one of my pages that contains portraits and bios -to one that has a hover effect with a drop down field that shows the bio. I found code here that does exactly what I need (How to show text on image when hovering?) and I tested it out on another site to make sure it's working correctly. Problem is, when I put it on my page template, all the header and footer coding (color, font, styles, etc.) are overwritten by the code that I've pasted in. I'm not a coder and only know a little bit of the terminology and how it all works (so please be specific with your responses). I am thinking I need the new code to be in some kind of container that keeps the default page/site styles intact but I'm not sure what to put to do that. I'm also not sure if my new hover code is in the right place. The original code on my template is this:
<!DOCTYPE html>
<html lang="en">
<!-- Head Tag -->
[[$head-tag]]
<style>
.top {
margin-bottom: -75px;
}
</style>
<body>
[[$gtm]]
<!-- Navigation -->
[[$navigation]]
<!-- PAGE CONTENT -->
<section class="top">
<div class="container">
[[$top-page-info]]
<div class="row body-copy">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
[[*content]]
</div>
</div>
</div><!--end row-->
</div><!--end container-->
</section>
<section class="leaders">
<div class="container">
<div class="row">
[[!getPage?
&elementClass=`modSnippet`
&element=`getResources`
&parents=`14`
&depth=`0`
&pageVarKey=`page`
&includeTVs=`1`
&processTVs=`1`
&includeContent=`1`
&showHidden=`1`
&sortby=`{"publishedon":"DESC"}`
&tpl=`LeaderTpl`]]
</div><!--end row-->
</div><!--end container-->
</section>
<!-- PAGE CONTENT END-->
<!-- Footer -->
[[$footer]]
<!-- JS Includes -->
[[$js-includes]]
</body>
</html>
Should I insert the new code in place of the "!getPage?" section (though I'm wondering if deleting some of that is removing code that I need for the default page settings/styles) or should it go below it, just above the line at the end that closes the div and ends the container?
Any help or direction would be greatly appreciated. (And please be specific as I don't really understand all this language.) TIA
I'm new to this, so I apologice if the questions are stupid.
I have some code I inherited that I need to customize. I have an input defined in my html file:
<div style="display: none;">
<input id="homeIcon" type="hidden" value="true" />
I also have this in my html:
<div id="header">
<div style="float: left;">
<div id="headerTitle">
My Website
</div>
</div>
</div>
In the CSS I want to decide where to place this home icon. I want it to appear in the header to the right of the headerTitle.
Can I use the CSS to move an html element so that it appears in another div?
I managed to change the location within the current div - but not move it to an entirely new place.
Thanks,
Rocky
It's bad idea to relocate elements using CSS (absolute positioning and other stuff that will break your layout).
CSS is just for visual representation of elements, so use HTML to change elements position
<div id="header">
<input id="homeIcon" type="hidden" value="true"/>
<div id="headerTitle">
My Website
</div>
</div>
hello Rocky using css you can not move the element to another div but you can "over lap on the div area" so look like you put them to another div.using position
I'm trying to integrate an html page(which already has lots of formatting, links to css files, .js files etc) in to asp.net
The problem is that some of the styles used in the html refer to a form element, like this:
#Area form input[type="mytype"] {
content: '';
position: absolute;
display: block;
}
When I try to wrap this up in an asp.net page, it loses the formatting, because I need to put everything inside an asp.net 'form' with runat="server". The Css gets confused because it's now a form within and area within a form.
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
</head>
<body>
<form method="post" action="uitest.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUxMTcwNzgxMGRk/FKLdutHp78brNcMIqdbHqG7TcPZ3FoZf+HMkhw=" />
</div>
<div id="feature">
<div class="validate-form">
<span class="icon"></span>
<input class="required-email" type="email" placeholder="Email address">
<button class="btn"><span>Apply now</span></button>
</div>
</div>
</form>
</body>
</html>
What's the best way round this? Can I just rename 'form' to something else in the Css?
thanks
You should not have a nested form in a Web Forms app. If your CSS styles aren't being applied, your selector isn't targeting your elements properly or your selected has lower specificity than another selector with conflicting styles. runat=server has nothing to do with it, as that attribute is not actually rendered on the page.
Now, it appears you have an illegal type for your input. Based on your selector, you should have a structure something like:
<div id="Area">
...
<form>
...
<input type="mytype" /> //ILLEGAL!!
</form>
</div>
Why do you have a mytype input? You should only be using valid types, like text. Change them, and then add this:
#Area form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If your inputs don't get a red background, then adjust to this:
form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If you are still having trouble, actually paste your source code (click View Source from your browser, not Visual Studio).
UPDATE
Why do you have #Area in your selector? There is not element in your markup with that ID. This selector will work:
form input[type="email"]{ ... }
Assuming you don't need to be able to interact with the input elements in the page's code-behind file, it's perfectly acceptable to just use literal HTML controls in the page's markup.
Assuming, also, that you are allowed to tweak the CSS, you can remove form from your selectors, and then just make sure you copy everything into a <div> ... </div> with an id="Area" attribute.
CSS:
#Area input[type="whatever"] {
content: '';
position: absolute;
display: block;
}
HTML:
<div id="Area">
...
<!-- add markup here -->
...
</div>
JSFiddle Example code: http://jsfiddle.net/SUMPq/8/
I have some text on a container, the code is at the top of the HTML, near the body:
<div id="container">
<div id="title_content">
<h1>Heading TAG</h1><br />
<p>SOME TEXT<br />SOME TEXT<br /></p>
</div></div>
<div id="spacebox"></div>
Then with CSS positioning i display the content at other part of the page:
#container{position:relative;width:860px;height:0;}
#title_content{position:relative;top:100px;left:10%;font-size:14px;}
The problem is that the content of the h1 tag is dynamic and sometimes it can be only one line and sometimes two or more, and in these cases the space box can be too large or too small. How can i handle this spacebox to be dynamic in height depending on the text contained?
CSS space box
#spacebox{display:block;width:auto;height:100px;z-index:100;}
just remove height:0; from #container
and give height:auto to #spacebox