Firefox is having issues when trying to print an iframe that is styled with display:none

Currently, I am implementing code obtained from an answer on Stack Overflow to enable direct printing of a separate page upon clicking a print button. The mechanism involves sending a URL to the print function which then loads the separate page into an iframe with a display:none attribute and prints it onLoad. While this method works seamlessly in Internet Explorer and Chrome, Firefox does not respond as intended. It appears that Firefox refuses to print an iframe that is set to display:none, as shown here:

<div id="printerDiv" style="display:none"></div>

Is this behavior expected? Despite trying various CSS techniques to conceal the div containing the iframe, it remains visible in some form. Currently, I am using the following CSS to render the iframe invisible:

#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}

However, even with these adjustments, there is still a noticeable 14px gap once the iframe is generated. Is there a way to completely hide the iframe without utilizing the display:none attribute? Ideally, is there a cleaner alternative to achieve this functionality?

I have also experimented with setting the iframe to display:block for @print media types and display:none for screen, but the JavaScript function fails to initiate the printing process.

htmlcssfirefoxcross-browser

Answer №1

When you set the position of your iFrame to absolute and move it off the page, it remains printable but invisible to the user.

#printerDiv iframe{
  position: absolute;
  top: -1000px;
}

Answer №2

Dealing with the same issue, I encountered a solution that worked well for me. In Firefox, when the display attribute is hidden, all height-related queries return 0 - whether it's through jQuery's .css('height') method, accessing the DOM element style directly, or using outerHeight() and outerWidth().

To overcome this, I implemented z-index in my CSS without needing to use position:absolute:

#printerDiv { z-index: -10; }

Then, to reveal the element, I simply adjust the z-index value using a jQuery css() function call.

Answer №3

If you have authority over the content within the iframe, command it to perform a self-print action:

<script type="text/javascript">
window.print()
</script>

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

Unable to output the string using htmlspecialchars

Oops! I made a mistake... just came across a JavaScript alert box! I just included htmlspecialchars. $src = './imgs/flag.jpg'; echo sprintf("<img alt=\"'.htmlspecialchars($name).'\" src=\"%s\" />", $src); I ...

phphtml

Transform the appearance of the datepicker with jquery-ui

Is it possible to customize the appearance of the calendar using css files from jquery-ui? <input type="text" id="dob"/> Check out this script: $(document).ready(function(){ $("#dob").datepicker(); }); See an example here. How can I style it ...

cssjquery-uidatepickercdn

Proper method for positioning text in a line

Trying to recreate the image below, but facing alignment issues with the text in my code. How can I vertically align the text so that they are aligned like in the photo? Flexbox hasn't helped due to varying text lengths causing misalignment. const ...

javascripthtmlcsscontainersalignment

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

htmlcssbootstrap-5

css - Issue with Margins Not Aligning Correctly Despite Using Inline-Block and Parent Element with a Fixed Width

I'm having trouble centering a pair of buttons inside a form. These buttons are enclosed within a <div> with display: inline-block, so the <div> is only as wide as the buttons themselves. The parent element to this <div> is a <for ...

htmlcss

spinning div content in a manner reminiscent of a roulette wheel

I am looking to create a roulette game that randomly selects numbers and displays them. Initially, I attempted to use images and backgroundOffset, but it caused significant lagging issues and difficulty in checking the rolled number. Therefore, I have impl ...

javascripthtmlcss

Apply a uniform style to a selection of <a> tags using CSS

As a beginner in web programming, I am currently exploring ASP.NET. In my project, I have three links structured like this: <ul style="margin-top:10px;"> <a style="background-color:transparent;padding:0px;" href="..."><img src="..."/> ...

asp.netcss

Show PDF on an HTML webpage

I've put together my resume using latex and now I'm looking to display my pdf in a similar way to how we would add an image as a background on a webpage. The main goal is to ensure that the hyperlinks within my resume remain functional. ...

htmljquerycssbootstrap-4

When contenteditable divs are reloaded, the hidden content disappears

When it comes to editing text, I utilize contenteditable divs on my website. The height of the div dynamically grows as I make changes, causing all other elements below it to shift downwards - which is exactly what I want. Once I've finished editing, ...

javascripthtmlcss

Displaying MySQL data in an HTML table using a shell script

Executing a MySQL query in a shell script that returns two columns TABLES=$($MYSQL -u $MUSER -p$MPASS -h $MHOST $MDB -e "SELECT table_name, ROUND(((data_length + index_length) / 1024 / 1024 / 1024), 2) AS table_size FROM information_schema.tables WHERE ta ...

htmlmysqlshellunix

Container Slides Along Despite Accurate Measurements

In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in. Despite my best effort ...

htmlcss

Disable the 'bouncy scrolling' feature for mobile devices

Is there a way to prevent the bouncy scrolling behavior on mobile devices? For example, when there is no content below to scroll, but you can still scroll up and then it bounces back when released. Here is my HTML structure: <html> <body> ...

javascriptjqueryhtmlioscss

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by brea ...

htmlimagecss

Counting the number of tasks associated with Django models relations

Attempting to retrieve a function from a table that should be present, but unable to access the value. The goal is to determine the number of completed tasks. models.py class Task(models.Model): title = models.CharField(max_length=55, null=T ...

htmldjangodjango-models

Set Sprite Canvas Material to match the color of a different element

Can someone please guide me on changing the color of the Sprite Canvas Material? var material = new THREE.SpriteCanvasMaterial( { color: 0xffffff, I am trying to make it match the color of another element based on a specific ID or class. However, I' ...

javascriptcssthree.js

Trouble with center alignment of div in CSS

I attempted to create a centered horizontal menu on my webpage but the 'div align=center' attribute is not functioning correctly. .nav ul { display: block; list-style-type: none; margin: 0; position: absolute; } .nav li { display: in ...

htmlcss

The pointer cursor seems to be missing in action

Currently using ReactJS, I have implemented a custom upload image button on my webpage. .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; cursor: pointer; } .upload-btn-wrapper input[type=file] { font-size: 10 ...

htmlcssreactjs

The WebDriver encountered an exception while trying to save a large HTML file using Selenium in Python, resulting in a failure with the following message: "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)"

As I browse through the Google Play Store and read reviews for a specific app identified by the URL, Selenium is used to locate the reviews and scroll down to load all of them. The scrolling action functions correctly; without the headless option enabled, ...

pythonseleniumfirefoxmarionettegeckodriver

When using jQuery with a large selectbox, you may encounter the error message: "Uncaught RangeError: Maximum

My select box works fine in IE and Mozilla, but throws an uncaught rangeError in Chrome when choosing the "Others" option to display a second select box with over 10k options. How can I diagnose and resolve this issue? <!DOCTYPE html> ...

javascriptjqueryhtmlgoogle-chromedrop-down-menu