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%
Related
I've been having this problem for a while now, in some parts of my report the columns overlap, no matter what I do on the styling I still can't fix it. Here's how it looks:
EDIT:
I'd also like to add that this issue is inconsistent. This mostly happens when opening the report on Google Chrome but it doesnt happen on Edge. Also there are zoom levels that the layout is fixed for example if I zoom about 150% the layout gets fixed.
Also I think what's strange is that only the colored columns overlaps. As you can see the columns with just white background are working well.
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
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
I am having some trouble on this and can not figure it out on my own. I am not any kind of coder just dabbled in it a few times starting in 1998. I am trying to design a website for a friend of mine using bootstrap 3.3.4 for the first time. After getting it online I realized it is way to wide on Iphones. It shows about 50% padding on the right side. You have to zoom in to use view the website correctly. Can anybody give me any input on what can be causing this? I cant find a cause anywhere. On the desktop version it works perfectly even when I resize the window. It is a little to wide on android also but is not near as noticeable as it is on IOS. The website is up at
This link
Thank you for any help
It's difficult to tell exactly what is wrong as I don't have an iPhone. But some observations:
You are loading Boostrap javasript in the head, then loading jQuery and Bootstrap js again at the bottom. Remove the one from headas it's giving a console error.
In the footer, your row has as it's child element a class of col-me-6 which I suspect is a typo. Also it has an inline style of width: 100% which is not advisable - use the grid system to control widths.
Finally, and most likely your problem, in the #portfolio container, your first row has some invalid contents. Only a col-* can be a child of a row. You also have a nested row which is screwing up the margins and giving you the extra wide window.
Apologies if this is a vague description, I just cannot see how this is happening.
In Chrome and Firefox, this page appears completely fine.
However in IE, the main content (name of record, picture, details etc) moves down to the bottom of the page. I just cannot get my head round why this is happening. Hoping someone can spot the problem.
A slightly strangers problem is this:
In the right content unit (display the smaller images of records), the last record has some of its content "duplicated" onto the next line. This is really strange.
As I said, the page works completely fine in Chrome/FF and these errors only appear in IE.
If you need me to post any code then let me know.
In most cases it is a width problem.(IE looks with another glasses) You can try to reduce the width of release_text or release_image part or increase the total width.