Do you have any idea why window.print() in Safari 11 and lower generates white pages when trying to print the page? I have tried giving the html + body a fixed width in a #media print query, but it doesn't work. Do you have any tips for how to fix it, or maybe you know about an alternative? Thanks for any help!!
Related
I'm working on a project for my school where the courses, teachers and clasroomnumbers are appearing for the signage TV's.
The start of the project was made by the company who make's our software. The only thing I can do now is change some things with javascript. These changes are working fine in Chrome and Firefox. However I need it to work in Internet Explorer.
You could go to this link to see what happens:
https://www.miras.be/lokaal_bezetting_lijst/57/2019-09-26/08:00/22:00/
When you open in Chome or Firefox it works perfectly
When you open in IE, you see that the hours are not well displayed.
--> Strange manual solutions: When I refresh the page or do something that resizes the window, it does work.
Bad view:
Good view:
Does anyone know a javascript/jquery solution for this?
Thanks in advance!
Laurent
If you want the table column width always fixed you can use
MIN-WIDTH and MAX_WIDTH on the same column. If you will you the both property with width than table column will always same.
After a long search I've found the solution. As I've mentioned, it becomes ok when I resize the window. With this event at the end of my script everything was fixed. Thanks for the answers and help!
$(window).trigger('resize')
When I try to use Window.print() function that works good as I want in Google Chrome but same thing not working good in Mozilla Firefox. Here are some screenshots of the problem which is persisting. What's the problem here? and also how to remove default header and footer from print of Firefox because its works good in chrome
Html View of Report on Web:
View when do Print in Mozilla Firefox
Browsers render differently by default.
So this link might help in custom print CSS styling.
If still some problem persists, post that part of code.
Try adding the following CSS to see if that fixes it.
* {
overflow: visible !important;
}
You may need to experiment with overflow-x instead of overflow and applying to only the print media query.
try using some plugins to export your report into proper format.. ex. PDFMake.js
I am calling this javascript on page load
document.body.scrollTop = document.documentElement.scrollTop = 0;
I want html page starts from top when loaded, above javascript working fine for chrome, safari(macbook) but not working for safari on iphone,
can anybody suggest workaround in javascript only.
Posting this here for future visitors from Google.
This same error occured to me... The problem was just one CSS rule on body element.
overflow-x: hidden
If this CSS rule exists, remove it and scrollTop should work on mobile Safari.
As I tested this before, there are problems rendering on ios, but it also depends on the version of the OS for example, for an iPad pro, there is no problem! But on iPad air you there isn't much to do! so what you can do is to make your code compatible like:
document.scrollingElement.scrollTop
it should give you the right solution.
White Box issue only when using Chrome this box does not display in any other browser.
Anyone know of any Css tricks to get rid of it? Funny thing is it displays only for 3-4
seconds and goes away very annoying tho.
It may just be a bug with your browser, have you tried restarting your browser? Also make sure that you didn't leave something in your HTML on accident.
When printing from windows7 with ie8; only whats visible in viewport is printing.
Printing from windows8 which I believe has ie9 prints the whole webpage with no issue, about 5 pages in total. It will work with compatibly view enabled though.
All is checked from the print prompt so that's not an issue. This was brought to my attention from a user so its not an isolated issue. Any help is appreciated.
I had to set the body to static
body{position: static;}