Tips for eliminating unwanted white space that appears before the "page-break-before: always" CSS code

For an example that can be replicated, check out this link - 

https://cbbanalytics.com/stats/27694/games/1864019/overview
. We have applied a CSS style of page-break-before: always to the <h3> element containing the Stanford logo and text Stanford Team Shot Charts, using the class print-break. The purpose of this is to ensure a clean PDF output when printing or saving.

https://i.sstatic.net/gG1Do.png

. . .

However, when printing or saving as a PDF, despite the page break functioning correctly, there is an additional whitespace above the <h3> element on the second page. The cause of this extra space remains unknown...

https://i.sstatic.net/uJF7C.png

. . .

Upon entering print preview mode following the steps outlined here, no such white space appears in the browser above the header or below the tables.

https://i.sstatic.net/LT2Ys.png

. . . Please note that the empty div with margin-top: 60px just above the <h3> element is hidden when printed (using the hide-print class which sets display: none for printing). Removing this div does not resolve the issue of the mysterious white space above the page break. What else could be causing this problem? It significantly impacts the appearance of the printed or saved PDF.

UPDATE: Deleting the element with the controller-navbar-container class (the red bar at the top displaying team names & logos) resolves the page break issue. However, the reason behind this solution remains unclear. Why does this element influence the page break behavior?

htmlcsspage-break-before

Answer №1

To reveal the content, simply eliminate the "hide-print row" division and apply a margin-top of 40px underneath the element labeled as "row".

Answer №2

To conceal the space created by a specific element, apply the hide-print class using media print.

@media print{
   .hide-print{
       display:none;
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Search for the highest value from the dropdown list in real-time using Selenium with Python

Currently, I am utilizing Python along with Selenium to automate a certain application. My goal is to extract the top value from a drop-down menu, however, the values in the menu are constantly changing. This makes it impossible for me to input a static XP ...

pythonhtmlseleniumxpath

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that ...

htmlcssflexbox

AngularJS : Resolving Alignment Issues with ng-repeat and ng-include

The ng-repeat feature is being utilized here with an inclusion of a different HTML partial. <div ng-repeat="item in feedItems"> <div ng-include="'item.itemType.html'"> </div> </div> Below is the CSS for the partial H ...

htmlcssangularjs

Update the content of a UI Bootstrap accordion group by clicking a button within the group above it

I have implemented this accordion component: <uib-accordion close-others="true"> <uib-accordion-group heading="Action" is-open="true" class="text-center"> <div class="btn-group text-center" data-toggle="b ...

cssangularjstwitter-bootstrapaccordionangular-ui-bootstrap

Convert Jupyter notebook to an executable html file

Looking for a way to export a Jupyter notebook in HTML to get an executable version? Currently, I upload the notebook to a git repository and use binder to obtain its executable form. However, I want to directly upload the notebook to my website without ha ...

htmljupyter-notebookjupyterandroid-binder

Tips on extracting images from a blob:http localhost URL using jquery, angularjs, or webgl

Can anyone guide me on how to retrieve an image from a localhost URL by using jQuery, AngularJS, or WebGL? I have the URL of the uploaded image file in the format: blob:http%3A//localhost%3A9000/87424398-8ee0-4db1-a653-bc18838d6b24. My goal is to display t ...

javascriptjqueryhtmlangularjs

How to Generate Web Page Output from HTML 5 Canvas without Printer Prompt

Is there a way to achieve silent printing of HTML5 Canvas content? Currently, I am able to print, but a window always pops up prompting me to select a printer and settings. How can I make the browser print to the default printer without any prompts? I am ...

javascriptjqueryasp.nethtmlprinting

Creating Static Content using Spring Framework

I need some help with handling static content in my SpringMVC app. Currently, I am using the following configuration: <mvc:resources mapping="/resources/**" location="/resources/" /> This setup works well for uploading and retrieving images within ...

cssspringmodel-view-controller

Show child element when hovering over parent element

My current issue involves a button animation I am attempting to create. I envision a description box smoothly sliding out from behind a button whenever it is hovered over. However, my current implementation lacks the desired transition effect and simply ju ...

htmlcss

The strange behavior of !important, display:none, and .height()

While working with a piece of JS code yesterday, I stumbled upon something peculiar. There was a div element that was initially hidden using display:none, and I was utilizing its height in some JavaScript calculations. Everything was functioning properly u ...

javascriptjquerycss

I'm struggling to make my div display inline

My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue? Just so you know, I'm only on my 4th day of learn ...

htmlcss

What steps can be taken to resolve the issue of "Uncaught TypeError: undefined is not a function"?

Check out the JSfiddle link for reference: http://jsfiddle.net/mostthingsweb/cRayJ/1/ Including my code below along with an explanation of what's going wrong: This is a snippet from the HTML header, showing all the necessary links: <head> ...

javascriptjqueryhtmlcss

What is the best approach to define a *.css file in an ASP.NET UserControl?

I am dealing with a CSS file which includes all of the <style> tags used in my website. Is there a way I can connect this CSS file to my UserControl, allowing me to utilize the styles within the CssClass attributes for my child controls? ...

.netasp.netcssuser-controlsstylesheet

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

Different ways to modify the color and thickness of a variable in HTML5 with either JavaScript or CSS

I am currently working with a JavaScript file where I have a variable defined as follows: var nombre = document.getElementById('nombre').value; The 'nombre' variable corresponds to an element in an HTML file: Nombre: <input type=" ...

javascripthtmlcss

"Exploring the World of String Slicing in JavaScript

export class PricingValues{ amount : string; } const PRICING_VALUES : PricingValues[] =[ {amount :'$10,000'},{amount :'$20,000'},{amount :'$30,000'},{amount :'$40,000'},{amount :'$50,000'} ...

javascripthtmlangular

Tips for populating selectsize JS automatically while editing the HTML form

I am currently working on a form that consists of 3 fields: 2 input text fields and 1 select dropdown menu. After adding data to the form, I encountered an issue when trying to edit the information. While the input text fields retain the old data as expe ...

javascripthtmljquerydjangoajaxform

To add a code snippet to the right side of a paragraph using CSS, place it at the end of the

Is there a way to insert code at the end of each paragraph and have it aligned to the right on the same line as the last sentence? Update: I initially tried using float:right, but encountered an issue with vertically aligning the code with the last line ...

htmlcss

Utilizing Vue to pinpoint the DOM element of another component: Steps for success

Upon clicking the sidebar icon in Sidebar.vue component: <i class='bx bx-menu' v-on:click="toggleMenu()" id="btn"></i> I want to toggle the classes of elements in different components: methods: { toggl ...

javascripthtmlcssvue.jsdom

Using an onclick function to increment and decrement values

Can anyone help me figure out how to reverse a function onclick? Here is the function: var theTotal = 0; $('button').click(function(){ theTotal = Number(theTotal) + Number($(this).val()); $('.total').text(theTotal); }); ...

javascriptjqueryhtml