I am developing a web application in PHP that needs to generate some invoices, and I chose mpdf to do this.
Now, I have the following challenge: the invoice exists out some divs under eachother. I want MPDF to try and see if this FULL div fits on 1 page. If this is the only div on the page, it can overflow to the next page. If it's the second or third, fourth, etc. then this whole div needs to be put on the next page.
I tried this "avoid page break" but it bugs a lot and creates empty pages.
Does anyone have a suggestion?
Not sure what you mean with 'tried "avoid page break"'
But the following seems like this worked well for me with latest MPDF:
#media print {
div {
page-break-inside: avoid;
}
}
However, it doesn't work (well) for floating divs.
Related
I have a problem showing my page visually the same on FireFox and Chrome.
Page renders correctly with Chrome (showing icons in two lines), but in Firefox icons break visually and create a third row. I think that the problem is with Bootstrap, but I don't understand why. I have tried different solutions, but nothing.
The page with this problem:
Link of the page: http://www.unishare.it/sedi/1
You have a lot of things going on in your HTML. Firstly, you shouldn't write any code outside of the scope. You should place your custom style elements always inside of the tag. Secondly, move bootstrap.css to the top. That is your css boilerplate (That is the css code that resets your visual settings across all browsers). All the other css files (font-awesome.css, slider.css, etc...) should be placed after the boilerplate css code/file.
After placing all library css files, your custom css files should be the last ones in the tag (I mean all the style codes at the top of your html page).
Try these suggestions and come back with the result. I believe you'll be good to go then.
EDIT: After taking a second look and playing your HTML with FireFox's dev tools, I created a solution for you. Just surround your "portfolio-boxes" divs with a row. They are not actually recognized as a seperate row in your DOM, that's why they don't appear in two seperate lines.
In short, you should create a div with a class of "row" for every "portfolio-boxes" div, seperately.
Does that solve your problem? If yes, you can vote up and select the answer ;)
I have two questions im sure are very simple I'm just looking over something.
1.) To start off, my website is mostly HTML, except I have a WordPress blog page. To make the blog page look like the HTML home page, I modified the header.php and footer.php, and everything looks fine except one problem.
As you'll notice if you compare the Home page with the Blog page, for some reason the margins I have to position the navigation links & social media icons isn't working but it works on the home page? I really have no idea why it isn't working, the stylesheet is linked correctly and everything, as every other style works fine except the margin in those areas.
2.) At the bottom of the home page there is a white space below the footer, but its not on the WordPress blog page? I am trying to remove the white space but have had no luck. The only way I can remove it is if I make the footer 30px larger, which I don't want to do. I have set heights on the HTML, Body and am unsure why the space is there.
Thanks ahead of time, I appreciate you taking the time to look at my questions.
EDIT here is a link to the site:
http://jqwebexamples.com/iAM_Talent/Version3-rev/index.html
The <p> Tags in your footer are the problem. If you remove (or disable it temporarily) the following style:
#footer p {
margin-top: 45px;
}
then the white line disappears. Take a look in firebug to check this out.
The other issue looks like caused by the unsorted list in your navigation div.
I'm building a site where there will be four tiles on the front page. When a tile is selected, I want the content to pop up in like a window that will be a bit transparent so you can see the main page behind it.
I've successfully coded just that, getting the link to bring up another div that is otherwise hidden and I've even gotten it to load another html document. I accomplished this with XMLHttpRequest();. My question is, is there a more efficient way to do this? I know I've done something similar in PHP before in school and when I google, I do see that being a way to do it, but I'm also seeing jQuery and AJAX being mentioned. My overall goal is to get it to where if I want to update the CSS of the screens, that I only have to do that for the main page, and it affects the content pop-ups.
I hope I explained this well enough. Thank you for any advice!
It's very simple to do in jQuery:
$("#yourDivsId").load("/UrlOfYourIntendedMarkupDelivery?anyarguments=true");
I am having a hard time figuring out what's going on with a theme for a new script that i just bought.
My site is azngirls.com (don't worry it's not pornographic hahah) and if you go to the frontpage you will see that there is a nav bar on top or header bar that shows Login - Register (Forgot Password) and etc. and that bar is supposed to be on top without any gap but if you go to other parts of the site like for example http://azngirls.com/tos - you will see that there is a gap between that nav bar and the actual top of the website which makes it look awkward when you scroll down. This problem occurs everytime i edit the smallest things inside the php file, as in even if i change a single word or letter it suddenly shows that gap.
Another problem that I am having is that on the same page - on the side bar to the right there is a "Show me" button for Browser Plugins but when i click the link it takes me to a 404 page, but when i click the Tools link in the footer menu it takes me to a page that works.
Thanks alot for any help you guys can give! Really appreciate it!
you have a huge empty line filled with whitespace between <body> and <meta> tags. and you included a <meta> tag inside a body, as it should be in the <head> tag.
As #tpaksu suggested, your html is totally messed up. And there is a easy fix to your problem, just add the following code to your style sheet.
.content-infobox {
top: 0;
}
use this code on the respective ID
#id{
margin:0px;
}
is there a possible bit of code (php, java, css, html) that will force a page to display a print dialogue box, and by default only allow page 1 of X to be printed, or just simply set the print dialogue box to those settings?
I have a page that is being printed out via a barcode printer that likes to print lots of blank pages based on the margins and other silly stuff. I just need the content on the first page only, if possible, a print dialogue pop-up box would be even better!
Any ideas on what code type and some resources to direct me would be grand, google hasn't turned up much.
You can get a print dialog by triggering the window.print event. This will only open the browser's print dialog however, you have no control over the actual print process other than setting stuff in the dialog box that opens.
As for blank page printing, your best bet is styling the page to avoid that.
I don't know how is the structure of your page, how the blocks of divs or tables are arranged but in my case I can do it easily with CSS.
Consider you have a div with id="FAQ" and that's the only thing you want to be printed, you can do it like this:
<style>
#media print
{
body div, body table {display: none;}
body div#FAQ, body div#FAQ table {display: block;}
}
</style>
This way I hide everything except the div id="FAQ".
I don't believe this is the best way, because I use #media print to hide some divs from printing like instructions or FAQs not the other way arround, but, it is a way.
Although, bamba1 seems to have a nice answer.