Im working on a print style in chrome, an everything seemed fine, until i noticed that i didnt get any Footer or header on the print (the std. with page title, url etc., and i HAVE turned it ON in the print preview dialog).
So i just thought i would make one, so i just added a with:
.print-logo {
position: fixed;
display: block;
bottom: 0px;
right: 0px;
text-align: right;
width: 100%;
}
But that doesnt place itself all the way to the right:
So i tried printing in IE10, and here both the default footer, and my custom shows up, and is placed correct.
Everything is setup with bootstrap, and print friendly version is made by using the .hidden-print class.
Its all in localhost ATM, but i have a saved html version of 1 page here:
Anyone who have experience with these problems?
UPDATE:
Found that if i add
#page {
size: A4 portrait;
}
that i will add my default footer and headers... but my custom one is still displaying wrong...
I got my best result printing in Chrome setting a fixed width (in px) to the page or main div. If not, Chrome try to fix the content changing font-sizes, etc.
Related
I'm working with a website (Gatsby) with a sticky bar at the bottom on one page. I'm using position: sticky to stick the bar to the bottom of the screen. However, this works on all other mobile browsers but Chrome in iOS.
Scenario:
First page: This page has a list. When clicked on an item, it will open the second page in a new tab.
Second page: This is the page with the sticky bar and this opens in a new tab.
Issue: When I go to the first page, click on the item, and goes to the second page which opens in a new tab, the sticky bar gets covered from the bottom toolbar. However, if you click on the second page's link directly and visit it, the sticky bar works fine.
Has anyone of you encountered something like this before? Can this be a bug in iOS Chrome or am I doing something wrong?
Code I'm using for the sticky bar:
.floating-bar {
display: flex;
position: sticky;
align-items: center;
justify-content: space-between;
padding: 0 25px;
bottom: 0;
left: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
background: white;
border-top: 1px solid #dfe1e6;
height: 60px;
overflow: hidden;
// + some paddings based on the viewport
}
Please see the below gifs as a reference.
Visiting from the first page: https://ibb.co/6yMLLm3
Direct visit using the URL: https://ibb.co/Mp1rknm
This isn't a full answer as it doesn't have a workaround (as yet!) but I put this finding here in case it helps us get nearer the solution.
Try running these two bits of code. The first takes you the site without a `target="_blank" in the a element - i.e. it stays in the same browser tab. The second has the target attribute so opens a new tab. The first shows the sticky div correctly, the second only when the user has scrolled.
No target - works OK:
goto site
With target - doesn't work OK
goto site
(can't run it as a snippet it seems).
There is a target="_blank" in the first page code and this seems to cause Chrome IOS to malfunction.
Update: while the problem discussed in this post is not the same, it does seem people were having problems with target_blank in Chrome on IOS, including in one case removing the target_blank to get round the problem. See https://support.google.com/chrome/thread/10249317?hl=en
I've been turning the web upside down for the past hour or so but can't seem to find the solution for my rendering problem.
I'm using Rotativa (1.6.4) as the PDF creation library which was capable to reproduce the HTML I threw at it with almost 100% accuracy. Why almost; because it seems that charts I'm converting to PDF cause problems when chart doesn't fit the page and it should be transferred to the next page. Check the screenshot for more details.
As can be seen from the screenshot one chart is overlapping which happens for, to me, unknown reason.
I tried adding suggested page breakers but without any help:
.page-breaker {
display: block;
clear: both;
page-break-after: always;
}
Wrappers around charts have the following CSS rules:
.chartContainer {
float: left;
clear: both;
width: 100%;
height: 350px;
margin: 20px auto;
page-break-before: always;
page-break-after: always;
}
Not only does the PDF generated by Rotativa render incorrectly, the same thing goes for print preview in Chrome. So, the problem obviously is somewhere between page breaks and CSS - but the solution is still out there.
Any help would be appreciated.
Forget about adding page-break-before or page-break-after. The solution is to add page-break-inside: avoid !important rule. Rule should be added to the container/wrapper of the elements that could get broken in page break.
Whatever i've tried, it was not working. I found that page css contains
body{ display: -webkit-box; }
when I comment this line, page-break-* starts to work.
Is there any way to force Chrome to always print without headers and margins? Chrome keeps forgetting and it really messes up my cash register program (if the header is there, it tries to print the entire page, which is a lot of white space). If you have any CSS, Chrome settings, even hard-coded editing of Chrome itself: anything that can fix this would be appreciated.
If you want to change this via your website, you can try using css media queries to hide or rearrange elements for printing.
#media print {
/* All your print styles go here */
margin: 0;
#header, #footer, #nav {
display: none !important;
}
}
I had the same issue. I wanted to override the print options so that the browser's headers and footers did not display.
Putting #page {margin: 5mm;} into my CSS file worked perfectly. In fact if you use #page {margin: 0} the Headers and Footers option is not even displayed on the Print Preview (in Chrome, I have not yet tested other browsers.
I've noticed a white flicker that appears when ever I navigate between any html files in my project except for when I navigate away from my index file. I'm using JQM but I'm not using ajax because I'm linking to multipage documents.
I've read this happening to people who use JQM along with Phonegap when making apps but for a regular desktop site, I am confused as to why this is happening. Any idea?
Try this..
Remove data-position="fixed" on headers and footers if you are using it.
Then, apply the following CSS styles to your header, content and footer:
.header {
position : fixed;
z-index : 10;
top : 0;
width : 100%
}
.content {
padding : 45px 15px
}
.footer {
position : fixed;
z-index : 10;
bottom : 0;
width : 100%
}
This idea/snippet is borrowed from what Jasper's answer (not the OP's accepted answer) in this question. I was experiencing that flicker problem on a single-page jQuery Mobile v1.1.0 + Phonegap application and this solved it for me. Perhaps this same workaround will work for your multi-page application on v1.3.
This is an issue not easy to explain, basically, when you open my site (http://www.securebitcr.com/test/sbcr/) and resize, you can see an "extra" space at the end of the site, is there a way to limit that?
It is like, if I have a div(height:800) but the window itself is sized to 400px, I am able to see the rest of the site, but all the other objects that I'm attaching to the bottom (like the footer) ... you can see all the code at once in my file.
http://www.securebitcr.com/test/sbcr/
Any help is greatly appreciated.
Thanks,
Marco
I didn't test this in any other browser, so you may have to serve these changes to just IE7, by using a stylesheet just for IE7, via a conditional comment.
Set these styles:
html, body { margin: 0; padding: 0; height: 100% }
body { position: relative }
I recommend trying those changes, and seeing if they're fine to apply for all browsers - that might well be the case.
It looks like #content_frame is causing the scrollbar to appear even though you're using overflow: hidden on the parents. I'm guessing position: relative has something to with it, try removing that. It works fine in IE8 and Firefox.