Print vs. Web Page issue...

Jim R · December 11, 2017

I'm setting up CSS to create single page printouts of web pages. Everything looks good except one aspect.

We're looking at the area just below where it says Skills Breakdown. On the printed page, there is a large gap that shouldn't exist and doesn't exist on the web page.

The web page:

The printed page:

I don't know of a way to see what's creating the gap in the printed page.

requinix · December 11, 2017

Familiar with inspecting HTML and CSS in your browser? See if it can apply print styles (or just make the page do that with some client-side manipulation) and have at.

I'm looking at the page myself but it's quite... broken. Not the same as what you've posted. Are you actively working on it right now?

Jim R · December 11, 2017

I have @media print part in the CSS. I've hidden a number of divs I don't need to print on a regular sheet.

I just started on it today.

requinix · December 11, 2017

Here is what I see now.

Like I said, quite different. Kinda hard to figure out why a page is not what you want to see when it's already not the same as what you actually see.

Jim R · December 12, 2017

Which browser are you using? It doesn't look like that in any browser I've checked, including my phone.

requinix · December 12, 2017

Chrome on Windows. Looks about the same on Android Chrome too. And Edge. And IE 11.

Jim R · December 12, 2017

Ok. Thank you. I'll start there and see.

Jim R · December 12, 2017

Looks good in Chrome on my phone.

Jim R · December 12, 2017

I'm checking user agents via Safari, and it looks good in all of them. Edge, IE 11, Chrome.

requinix · December 12, 2017

I've tried three different web services that do screenshots and they're all producing the same results.

http://courtsideindiana.com/tag/aaron-henry/ right?

Jim R · December 12, 2017

Yes.

Home now. I'll check Chrome on my desktop.

Edited December 12, 2017 by Jim R

Jim R · December 12, 2017

Chrome on a Mac:

Jim R · December 12, 2017

Here is what the print preview looks like if I try to print to paper out of Chrome. Instead of a gap, I get overlapping.

requinix · December 12, 2017

I can't really tell unless I can see the page working the way you're seeing it.

Have you ever used Chrome's dev tools? You can do stuff like inspect and manipulate the CSS to find out why the page acts the way it does. Overlapping elements probably means a too short height on the upper element, but if you're floating or using other special positioning then there are a number of ways layout can go wrong.

Jim R · December 12, 2017

I can't really tell unless I can see the page working the way you're seeing it.

Have you ever used Chrome's dev tools? You can do stuff like inspect and manipulate the CSS to find out why the page acts the way it does. Overlapping elements probably means a too short height on the upper element, but if you're floating or using other special positioning then there are a number of ways layout can go wrong.

I'm looking at Chrome Dev Tools, emulating Print media.

It's actually reflecting a *margin-top: -300px !important;* that I have, which is what caused the overlap in Chrome. When I comment out that style, it shows the same gap in Safari, except it's a little deeper, more like a page break.

The -300px top margin had zero effect in Safari's print preview.

Jim R · December 12, 2017

I was a little surprised when I checked it through Chrome to see things as they should, given your results. Would Chrome be that much different iPhone/Android or Mac/(whatever machine you might be on)?

requinix · December 12, 2017

Actually I think the problem is that it's working on your side, not that it isn't working for me: like I said earlier, I tried some online services that capture screenshots of websites and they all matched what I'm seeing.

Jim R · December 12, 2017

Actually I think the problem is that it's working on your side, not that it isn't working for me: like I said earlier, I tried some online services that capture screenshots of websites and they all matched what I'm seeing.

What are you using for that? Because I'm only going by what I see in browsers and print previews.

requinix · December 12, 2017

I tried these three sites. Basically the first few relevant results searching for "screenshot website".

Jim R · December 12, 2017

Ok...I see what the issue is. There are two areas of the page which require being in a certain User Group. I think I fixed it. However, I still have two results for the printed page.

The 'premium user' gets a little more content. It looks great on the web page, but it still has the gap between SKILLS BREAKDOWN and the actual table.

The regular user, I think it now looks good on the web page, but the table overlaps SKILLS BREAKDOWN. Truly, this is immaterial big picture, as I'm eventually removing it from view for regular users. I just wanted to tell you the differences (gap vs. overlap) of the two versions.

Obviously, neither is desired.

The code for the chart comes from:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>


<?php


$query = "SELECT * FROM a_players
	WHERE CONCAT(nameFirst,' ', nameLast) = '".$slug."'";

?>



<canvas id="myChart" width="200" height="100"></canvas> 


<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Score Right", "Score Left", "Range", "Shot Mechanics", "Passing", "Per D", "Post D", "Rebounding", "Athleticism", "Strength"],
        datasets: [{
            label: 'Basketball Skill set',
            data: [8, 6, 9, 4, 9, 7, 8, 10, 11, 12],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    min: 3,
                    max: 12
                }
            }]
        }
    }
});
</script>

I have it showing on the page via an INCLUDE:

echo '<div class="skills"><h2>Skills Breakdown</h2>';	
   		include(ABSPATH ."scripts/charts_js/charts.php");
   		echo '</div>';

CSS for browser:


div.skills {
	padding-left: 20px;
}

CSS for printed page: (I'm considering just eliminating it on the printed page for everyone)

Any change I make in margin-top has zero impact.

#myChart {
		margin-top: -100px !important;	
 
/* 
		display: none !important;
 */

	}

requinix · December 12, 2017

Yeah, now it looks much better.

The margin-top is definitely the problem: if I disable the rule then the heading and chart don't overlap. Remove that bit entirely. I don't see any caching on playerProfiles.css so the change should take effect immediately.

Jim R · December 12, 2017

I logged out so I could see what you're seeing. The web page still looks good, but here is the print preview. The gap is very present now, logged in and logged out. See the chart sneaking out at the bottom of the page, well below Skills Breakdown.

Jim R · December 12, 2017

No more margin-top. I was able to isolate how to control the styling.

.skills canvas {

padding-left: 30px;

height: 258px !important;

width: 600px !important;

}

Height above 258px causes the gap in the printed page. Not sure it's big enough to read.

requinix · December 12, 2017

And now the Skills Breakdown is completely gone...

Look. I'm fine helping you figure out what's wrong and how to fix it, but if you keep changing the page around in such drastic ways I can't really do anything. Which is to say nothing of the fact that you're working on your actual live site instead of a development version.

Jim R · December 12, 2017

And now the Skills Breakdown is completely gone...

Look. I'm fine helping you figure out what's wrong and how to fix it, but if you keep changing the page around in such drastic ways I can't really do anything. Which is to say nothing of the fact that you're working on your actual live site instead of a development version.

I appreciate your time. I'm not sure I'm going to be able to get the words big enough while keeping the print out on one page. I put it back up. If it's a fix that comes easily to mind, or you'd like me to try something, I'll keep on it. I'd like to keep the chart. It's unique in the market. (Even the grid I posted above it is unique in this market.)

The site isn't truly live. That page is only accessible via the direct URL or a page which is protected.

Sign In

Print vs. Web Page issue...

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information