I am attempting to print a web page via Ctrl-P or right-click print so I can save it as a PDF. Up until several minutes ago, this was working flawlessly. I have made some minor sizing edits to the grid I am working with on the page and now when I attempt to print, the web page is displaying some formatting glitches on the preview screen.
The problem is shown below. There are various borders missing from the grid and this is carrying over to the PDF when fully saved. Nothing is missing when viewing the page normally.
I am aware this is a silly question, but for the sake documenting it, I did find out my issue.
My textareas are currently overlapping borders in certain areas of my grid. This appears to cause those grid borders to disappear to show the full textarea.
Below I took a snapshot to show how the textarea's blue line is going over my grid.
Solution: add padding to a bordered <div> if a textarea is in it
Related
I'm trying to fix a blank space at bottom of footer (I'm seeing in iPhone 7 Plus mobile). I honestly need help with this.
I've tried various methods (ie: overflow, margin, padding) and none had worked. I also tried to view mobile version on page testing sites but they don't show any blank space.
Odd or is it just my phone?
Looking through your code - this img element seems to be creating the issue:
<img src="https://tags.rd.linksynergy.com/cs?ns=ssc&uid3=5d062c714cedfd0012d95054">
Oddly enough, the img element is only there when I first visit the page. If I refresh the page, the element is gone. This leads me to believe that there is some JavaScript dynamically adding it to the HTML. The image itself seems to broken and never loads either. See screenshot below.
You might want to remove this <img> added the end of the file
This is the design of my report:
But when I click a button on runtime to preview the report that is about to be saved as PDF file it looks very different!
However when I download the file as PDF it looks just the way I designed it:
How do I fix the preview design?
White-space is very finicky in SSRS and you are experiencing this different behavior because you are using two different renderers and they are just flat out behaving a bit different. Looking at your design screen, it appears that you have just floating textboxes and white-space underneath between the last content and the footer. HTML rendering can be tricked into rendering that white-space before the footer by placing empty content (textbox or rectangle) in that space like so:
Red box: I would try inserting a blank rectangle off to the side, but the whole height, first.
Blue box: The next option would be to wrap the whole page contents into a rectangle.
It's actually a bit funny because most people are stuck trying to get rid of white-space in their HTML rendered report and you actually have the opposite issue here.
My company utilizes a software system that can generate reports and export them to a variety of formats. One of the formats is HTML and it does indeed look nice and keep the fidelity of the reports. However, when I go to print the report some of the elements on the page don't get printed. They are mostly stylistic things like lines that act as borders between areas. They are there when viewed in Chrome or Firefox, but immediately disappear when you go to print.
Everything is made with inline css styling such as:
<div style="page-break-inside:avoid;page-break-after:always;">
<span style="position:absolute;top:0.09388888in;left:0.7161965in;width:6.658803in;height:0.2861111in;font-family:Arial;font-size:14pt;color:Black;font-weight:bold;vertical-align:top;background-color:#FFFFFF;"><nobr>Report</nobr></span>
Here is a fiddle of the report so you can see what I'm talking about:
https://jsfiddle.net/otictac1/60pahz8e/
The yellow bar doesn't print nor do the borders that surround the table looking thing on the right.
Any thoughts on what might be causing that?
I have a problem that I am trying to fix for someone on the below page.
http://www.photographix.co.uk/external/the_dolphin/a-la-carte-menu.php
The problem is that when I attempt to print the page it is on one page only and half of the text disappears. This is on google chrome only (other browsers appear to be working ok which surprises me).
I am using a print style sheet and have tried using page breaks to no avail.
This is how they are printing to each browser, I appreciate each one may be slightly different.
(Need more rep to post all links)
http://www.photographix.co.uk/external/the_dolphin/chrome.pdf
At the moment I am just trying to get the text on chrome to appear on more than one page, I appreciate any help given.
I have a dashboard that I have to show on screen and print to paper. It has dates and some colored blocks to form a grid.
On the screen, everything looks right. But when I try to print to paper, rows are broken in the wrong places, even though there's enough space left. I have tried making the grid smaller, but it keeps happening and break lines are introduced wrongly.
I only have this problem in Firefox. Safari and Chrome are working properly. I have not tested IE yet.
Here you have some screenshots that show the problem.
This is the way it looks on the screen:
This is the way it looks when printed (to paper/pdf):
In this link you can see the html and css that I wrote: Source code
Any advice?
Try not using a width in pixels for the main container but use the 100%