When attempting to print a Bootstrap 4 HTML page in Chrome, the browser headers and footers are being clipped

Currently experiencing an issue with printing an HTML page styled using Bootstrap 4 (Bootstrap 3.3.7 works fine) on Chrome where the header and footer are partly covered up. Take a look at this screenshot to see what I mean - the date, title, and file/url are partially cut off. It appears to be a problem related to Bootstrap. I even tried creating a simple test page with just a link to the bootstrap cdn, and the issue still persists.

Below is the HTML code for testing purposes:

<html>
    <head>
        <link rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
            crossorigin="anonymous">
    </head>
    <body>
    </body>
</html>

If you include this code in an HTML document and then try to print it from Chrome by right-clicking, you will encounter the same issue.

Any suggestions on how to resolve this issue?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It appears that the problem lies in the fact that the size property is defined as a3 within the complete bootstrap css file (not the grid or reboot) in version 4.1.1 (latest version at the time of this writing)

To resolve this issue, you can include the following code snippet:

@page {
    size: auto;
}

Answer №3

Within bootstrap's _print.scss, the current issue appears to be linked to this specific rule:

// To ensure uniform printing results across browsers, specify a size and min-width.
// Omitting margin setting here to avoid interfering with `size` in Chrome. Also,
// refraining from using `!important` on `size` to prevent issues in Chrome.
@page {
  size: $print-page-size;
}

Despite the warning in the code comments about "margin...breaking `size` in Chrome," I did not encounter any problems related to this when testing it. Incorporating margins instead of directly adjusting the size property actually helps maintain the overall page layout provided by bootstrap. By adding a margin-top declaration, content is shifted below the page header (date and title), while a margin-bottom rule ensures proper spacing above the page footer (URL and page number).

@page {
  margin-top: 48px;
  margin-bottom: 48px;
}

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

The external Jquery file is being successfully loaded, however, the Jquery functions are failing to execute

I'm having an issue with my HTML partial, main index.html, and external JQuery file. Even though the file is being loaded successfully (verified through an alert function), the JQuery functions are not executing as expected. Upon checking the resourc ...

jqueryhtmlcssangularjstwitter-bootstrap

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

cssangulartypescript

Content is not centered with Bootstrap's flexbox

The alignment of content is not centered using bootstrap flex <div class="d-flex flex-row bd-highlight mb-3"> <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></div> <div cla ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Troubleshoot: Issue with Multilevel Dropdown Menu Functionality

Check out the menu at this link: The issue lies with the dropdown functionality, which is a result of WordPress's auto-generated code. Css: .menu-tophorizontalmenu-container { margin: 18px auto 21px; overflow: hidden; width: 1005px; ...

javascriptjquerycssmenudrop-down-menu

Changing the background color completely

Need help with CSS! I have two divs, one with a background color of #000 and the other with a transparent PNG image as the background. I want to override the background color with transparency from the PNG file so that the background doesn't cover th ...

htmlcss

Clicking on the menu in mobile view will cause it to slide upward

I have implemented sticky.js on my website and it is working well. However, when I resize the browser to mobile view and click the main menu button, it goes up and I am unable to close it. I have to scroll up to see it again. How can I make it stick to the ...

javascriptjquerycssresponsive-design

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME

Is there a way to achieve the same opacity effect on click as on mouseover? I've tried various selectors without success. Any help on this issue would be greatly appreciated. Thank you in advance! .container { position: absolute; background:url(&a ...

jqueryhtmlcsseventhandler

Solution for dropdown boxes malfunctioning with required fields

Using Bootstrap 3 for field validation on forms has been effective, but there seems to be an issue with certain browsers such as ios safari not validating [required] form items. To address this, I created a script that checks if an element is marked as req ...

javascriptjqueryhtmltwitter-bootstrap

django url not returning any data

Running a website using Python and Django has been quite the journey. I've implemented all the necessary changes to make it work smoothly. urls.py: urlpatterns = [ url('index.html', views.index, name='index'), url('admin/&ap ...

pythonhtmldjango

Having difficulty positioning breadcrumb items to float on the right side

As I create my Vue.js and Bootstrap application, I am working on a breadcrumb feature that presents some challenges. Specifically, I am trying to align the icons to the right while ensuring that the text "Files" remains floated to the left. <script s ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

What is the process for uploading the product information to the database during checkout?

Everything on my e-commerce website is functioning perfectly, except for the checkout page. After the customer fills in the bill details, they should be able to place an order. The issue I am facing is that while I am able to retrieve and store the bill d ...

phpjqueryhtml

The Input element's onChange event is not functioning as expected

I am experiencing some issues with my code. I am trying to dynamically change the background color based on user input, but I am struggling to make it work. It seems like a simple task, so I must be missing something. Below is my HTML markup and jQuery: ...

javascriptjqueryhtml

The input element captures the exact x and y coordinates of where the mouse was clicked

I have a requirement to submit a page, and I have opted to utilize the <input> element for this purpose with an image that zooms slightly when hovered over. Due to the unusual nature of my query, I was unable to find any relevant information about t ...

htmlcssimagebuttontransform

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing? <div class="container"> <textarea>This is my very long text that should not break. This is my very long text tha ...

javascripthtmlcsstinymcewysiwyg

Specify the database to be created using the select option tag

When utilizing the html form action attribute = "uploadone.php", a form is created with an option element value attribute = 'Red'. This method is used to create multiple databases in this manner. However, adding parameters to the URL becomes cumb ...

phphtml

Create a JavaScript variable every few seconds and generate a JSON array of the variable whenever it is updated

My variable, which consists of random numbers generated by mathrandom every second, such as "14323121", needs to be saved to an array for the latest 10 updates. function EveryOneSec() { var numbers = Math.random(); // I want to create an array from th ...

javascriptjqueryhtml

Exploring Text Color Verification with CSS in Selenium IDE

I am working on a project and want to ensure that my link is styled properly: <a class="title">My link</a> The CSS code used to style my link is as follows: a.title { color: #CC3333; } How can I confirm that the text "My link" is displayi ...

cssideselenium

Inconsistency in div height caused by positioning disparities

My demonstration shows two lines that should appear equal in height, but one ends up looking thicker due to its top position. Even just adjusting the top position by 1px can make a significant difference in how they look. Is there any way to prevent this u ...

htmlcss

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

I currently have a Toc element in my HTML with the property position: fixed. (This means it remains in place as you scroll) My goal is to prevent Chrome's Find Text feature from recognizing text within that Toc element. (Ideally using JavaScript) ...

javascripthtmlgoogle-chromefind

When using PHP to send Push Notification messages, I am encountering a problem where I am receiving a backslash () and an apostrophe ('

My PHP script is designed for sending push notification messages to phones. We can successfully send and receive normal messages, but encounter issues when using an apostrophe (') in the message. After researching online, I discovered a PHP function c ...

phphtmliosregex