Generating HTML tables with charts using FireFox

I am encountering an issue:
My table contains charts and tables that are displayed correctly in browsers. However, when I attempt to print it (as a PDF) in Mozilla Firefox, the third speedometer gets cut off, showing only 2.5 speedometers.
 Using the "shrink to fit" option does not solve the problem. If the scale is at 100%, the issue persists. When scaled down to 70% or less, all three speedometers are visible, but other text becomes too small. Other tables and content adjust perfectly based on the scale. Is there a solution to this problem? I specifically need it to work in FireFox, but I also tested it in Chrome where it auto-scales to about 70%.
Is there a way to scale the charts when printing? Setting a specific pixel size for the chart would not be ideal for my situation.
Here is the link to the speedometer table of charts I suspect the issue lies in the fact that JavaScript runs only once during page rendering and then does not scale afterward.
The CSS stylesheet:

.container
{
    width: 33%;
    border: 0px solid black;
}
.speedometer
{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

And the HTML file (JavaScript can be found in the link):

<table class="speedometer" >
    <tr>
        <td id="container" style= "width: 33%; height: 33%"></td>
        <td id="container1" style= "width: 33%; height: 33%"></td>
        <td id="container2" style= "width: 33%; height: 33%"></td>
    </tr>
<tr></tr>
<td class="container">
<table class="speedometer_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>1</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            01:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            01:00
        </td>
        <td align=center>
            02:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            02:00
        </td>
        <td align=center>
            03:00
        </td>

    </tr>
    </table>
    </td>
    <td class="container">
<table class="speedometer_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>2</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            100:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            100:00
        </td>
        <td align=center>
            200:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            200:00
        </td>
        <td align=center>
            300:00
        </td>

    </tr>
    </table>
    </td>

    <td class="container">
<table class="speedometr_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>3</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            100:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            100:00
        </td>
        <td align=center>
            200:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            200:00
        </td>
        <td align=center>
            300:00
        </td>

    </tr>
    </table>
    </td>
</table>
javascripthtmlcssfirefoxhighcharts

Answer №1

To enhance your layout for printing, consider implementing a print @media query in your CSS file to modify the width of your containers:

@media print {
  .container {
    width: 25%;
  }
}

Answer №2

To prevent your work from being cutoff, insert empty div elements at specified intervals within your code to ensure that specific content remains on each printed page.

Apply the following CSS to the empty divs:

@media print
{
.blankdiv {page-break-after:always}
}

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

When faced with the scenario of having the hashtag in the href attribute and a browser's back button, it

Hello everyone, I've encountered an issue with the "back" action in my browser. When I click on a link, it takes me to a specific page due to a JavaScript function being called. However, when I hit the back button, it simply removes the "#" from the U ...

javascripthtmlhref

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

javascripthtml

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

I'm struggling to implement a feature where users can search for authors in a database and be redirected to the corresponding HTML if found. Otherwise, it should display a message saying "No Author Found"... I need some assistance in getting this fun ...

javascripthtmlarrays

Tips for modifying the settings of a current google chart within a wrapper

Is there a way to update the options of an existing Google chart? For instance, if I want to apply these options to a chart with just a click of a button: var newOptions = { width: 400, height: 240, title: 'Preferred Pizza Toppings', col ...

javascriptgoogle-visualization

The CSS method to conceal the initial list item is proving ineffective

I'm having an issue with my WordPress theme where I want to hide only the first li element but it's hiding all of them. Here is the HTML code I'm using: <div class="nav"> <ul class="nav-tabs nav-justified"> <li class="activ ...

csswordpresscss-selectors

Updating row color according to values obtained from the map function in ReactJs

I have been experimenting with various methods to change the color of table rows based on specific values within a map function. Despite trying solutions like the UseRef hook and browsing through stack overflow, I have yet to achieve success. {dat ...

javascriptreactjsreact-hooksmap-function

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

javascripthtmlioscssxhtml

The element type is not valid: it should be a string for built-in components or a class/function for composite components, but it is currently an object in a React project

In the process of developing a React app to explore MUI capabilities, I encountered an error in my browser: The issue reported is: Element type is invalid - expected a string (for built-in components) or a class/function (for composite components), but rec ...

javascriptreactjsreact-router-dom

Is there a way to automatically change the display of an element once the user has closed the menu?

How can I ensure that the display of an element remains unchanged when a user opens and closes my website menu using JavaScript? ...

javascripthtmljquerycss

Using GraphQL in React to access a specific field

Here is the code snippet I am working with: interface MutationProps { username: string; Mutation: any; } export const UseCustomMutation: React.FC<MutationProps> | any = (username: any, Mutation: DocumentNode ) => { const [functi ...

javascriptreactjstypescriptgraphql

Can custom HTML elements be designed to function similarly to standard ones?

What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...

javascripthtml

Issue with ExpressJS Regex not correctly matching a path

I'm currently struggling with a simple regex that is supposed to match words consisting of letters (0-5) only, but for some reason it's not working as expected. Can anyone help me figure out the correct expression and how to implement it in Expre ...

javascriptregexnode.jsexpress

Universal customization for Material-UI Select

I am attempting to customize the appearance of a select component within a React project using MUI 5. Specifically, I want to modify the border size and color when the select component is in focus. While other components can be styled globally using styleO ...

javascriptreactjsmaterial-ui

Nock is capturing my request, however, my AJAX call is encountering an error

I am currently conducting a test on an AJAX request using the XMLHttpRequest method: export default function performTestRequest() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/service'); xhr.onload = ( ...

javascriptajaxxmlhttprequestnock

Navigating to a precise location on initial page load using Angular 11

Within the structure of my app, I have a parent component that displays a large image from a child component. When the parent component loads, I want the browser window to automatically scroll to a specific position in order to center the image. Currently ...

htmlcssangularfrontend

I am experiencing an issue where my application, built using NodeJS, Express, and Javascript, is failing to insert form data into the database despite

I am facing a challenge with my app's MVC design pattern where I am unable to insert form information into the corresponding table in the database. Despite installing the body-parser package via npm, the form is not functioning as expected. Can anyone ...

javascripthtmlnode.jsexpress

Inserting a large number of records in MySQL using a batch insertion method

Currently, I am facing an issue with inserting multiple records into a MySQL table at once. Just so you know, I am using Node.js along with MySQL (you can find more information about it here: https://www.npmjs.com/package/mysql) Here is what I have been ...

javascriptmysqlnode.jsbatch-processingbulkinsert

Show the file name in the email signature instead of displaying the image

I'm facing a unique challenge with images in my HTML email signature. Sometimes the images are replaced by their file names on certain email hosts. Interestingly, I can't replicate this error now as the images are displaying correctly again! He ...

htmlcssimageemail

React application not displaying element properly?

I am facing an issue with my react modal that displays a sign-in and sign-up form. The problem arises when I try to access the button on the form using its id, which is modal-sign-in-submit-button. document.getElementById('modal-sign-in-submit-button ...

javascriptnode.jsreactjs

Using javascript, add text to the beginning of a form before it is submitted

I'm trying to modify a form so that "https://" is added to the beginning of the input when it's submitted, without actually showing it in the text box. Here's the script I have so far: <script> function formSubmit(){ var x ...

javascripthtmlforms