Troubleshooting Problems with CSS Printing on iOS Devices

On desktop (both Windows and Mac), the print preview displays correctly. However, on iOS devices, the full width is not shown and there is some blank space above.

The issue I'm facing is that I cannot debug this problem using Browserstack. I am restricted to debugging only in the desktop rendering option

This is a snippet of my code:

@media print {
  body {
    -webkit-print-color-adjust: exact;
    width: 100%;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin: 0 auto !important;
  }
  .cssr-print {
    display: block;
    visibility: visible;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-color: @white;
    padding: 50px 0 0;
    max-width: 100%;
    text-align: center;
    width: 100%;
  }
}
<div class='cssr-print'>
  .....
</div>

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

https://i.sstatic.net/IIcYX.jpg

Answer №1

revised

changed the CSS property from position: fixed; to position: absolute;

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

What is the best way to center this menu on the web page?

Is there a way to center this menu on the web page for better alignment? Any suggestions on improving the code are welcome. Thank you in advance. Edit: Also, how can I modify the hover effect to change the background color to green and make it expand full ...

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...

Adding CSS code to my index.css file in React is not reflected in my application

I've been following a tutorial on YouTube about reactJS, and the YouTuber recommended importing a CSS file into index.css to properly style the website. However, when I tried copying the CSS code and importing it into both App.js and Index.js, nothing ...

Creating an interactive button using RichFaces and Bootstrap for seamless Ajax functionality

I have a challenge with making a fully clickable span or button that includes a Bootstrap refresh glyph-icon. The current code I have inherited only allows the icon itself to be clicked, leaving the area between the icon and button border unclickable. This ...

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3! I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj In essence, I have a ul element with relative positioning, followed by a series of di ...

Vue: Implement out-in transition where the incoming element appears before the outgoing element has completely disappeared

Check out my code on Codepen: here In this scenario, I have set up two div elements: Block 1 and Block 2. The functionality I am looking for is when a button is clicked, Block 1 smoothly translates to the left until it goes out of view. Once that happens ...

Can Masonry.js content be perfectly centered?

I am currently experimenting with creating a layout consisting of one to four variable columns per page using the Masonry plugin. I have been impressed with how it functions so far. However, there is an aggravating gap that persists despite my best effort ...

Contenteditable feature dynamically styling text upon input

Is it possible to prevent CSS properties like text-transform from affecting text entered via contenteditable? On my webpage, "CERTIFICATE PROGRAM" is shown in uppercase due to text-transform settings. However, the original input was: Certificate Program. ...

Trigger the animation with a button click by utilizing ng-class in Angular.js

How can I make an animation run more than once when a button is clicked? I've tried using ng-class but it's not working as expected. Any help would be appreciated. Thank you! <div ng-controller="MyCtrl"> <div class='contendor_port ...

"Enhancing Your Website with a Preloader Loading GIF: Step-by-Step Guide

Can anyone assist me in implementing a preloader with a 'loading' gif image on my website that will display for a maximum of 5 seconds before the site fully loads? I've attempted various methods without success, so any help would be greatly ...

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

There appears to be some lingering content in the JQuery Mobile slide-out dialog box

My jQuery mobile slide out dialog box is experiencing an issue. The first time the slide out occurs, a comment box appears where users can enter comments and then submit them, followed by a "THANK YOU" message. However, when the user closes the dialog box ...

What is the best way to ensure that an input field and a button stretch across the entire row in a Bootstrap form?

I need assistance with aligning the Post button to the right and having the text field for tags occupy the entire left section of the row within a Bootstrap 3 form. The form markup is shown below: https://i.sstatic.net/401RU.png Below is the complete cod ...

Unable to apply color changes with jQuery

As I delve into learning jQuery, I encountered an issue while attempting to change the color of a tr element. Strangely, I was successful in updating other CSS attributes like font-style. According to my understanding so far, we use the following syntax to ...

Is there a way to turn off vue.js transitions specifically for testing purposes?

I'm utilizing a vue.js component with the <transition> element for show/hide animations. However, I want to disable the animation for faster testing. How can I achieve this? The solution proposed is * { transition: none !important } in this lin ...

Properly spaced website images

I'm trying to display my images side by side with a slight margin in between them. However, when I apply a `margin-right: 10px;` to each div, the last image doesn't line up properly with my title bar. Is there a way to create spacing between the ...

The skipping of crucial text in tab focus is adversely affecting the accessibility of the website

My appbar contains an image link, a warning indicating the user's current environment, and details about the logged-in user. While testing accessibility with a screen reader, I noticed that tab focus skips over the user details in favor of a link in ...

complete collection of sass and scss website templates

Are there any comprehensive sass/scss templates or mixins similar to what you get with compass, but designed for an entire website? For example, can you define 2 columns, width, color, etc. and have it generate a full site/template? Thanks, Rick ...

Tips for effectively showcasing dynamic data retrieved from a database

I need to showcase my dynamic data from a database in a specific format that can accommodate anywhere from one to five variables. https://i.sstatic.net/pPQZE.png https://i.sstatic.net/gSJw6.png How can I effectively display and present the data using HTML ...