The inclusion of a new class in the div element is causing unnecessary page duplication

I'm attempting to designate a small section of text on my mobile webpage as the only part to be printed, specifically on a 62mm x 52mm brother label printer label.

Below is the CSS I've implemented:


@page {
        size: 62mm 52mm;
        margin: 0;
    }
.print:last-child {
     page-break-after: auto;
}

@media print {    
    .no-print, .no-print * {
        display: none !important;
    }
    
    body * {
        visibility: hidden;
    }
    
    .page, .page * {
        visibility: visible;
    }
    
    .page {
        position: absolute;
        left: 0px;
        top: 0px;
        
        display:block;
        margin-right:auto;
        margin-left:auto;
        height: 99%;
        padding: 0;
        transform: rotate(270deg);
    }
}

To differentiate between what should not be printed and what should be printed, I utilize the "no-print" class for elements to exclude from printing and the "page" class for the specific content intended for printing.

<div class="page" data-role="content" >
                <p align="center"><?php echo $_SESSION['prod_name'];?></p>
                <p align="center">#<?php echo $_SESSION['prod_no'];?></p>
                <p align="center" ><?php echo date("d / m / y",strtotime($_SESSION['date']));?></p>
                <br>
                <p align="center"><?php echo $_SESSION['result1'];?></p>
                <p align="center"><?php echo $_SESSION['result2'];?></p>
</div>

After exploring various solutions and initially suspecting a JQuery Mobile issue, I made an unexpected discovery when applying the class to a paragraph instead of a div, resulting in single-page printing, unlike the multiple pages produced by the div.

Am I overlooking a simple solution here? Have I approached this incorrectly, or could it possibly be a known bug related to JQuery Mobile?

Despite utilizing developer tools in different web browsers to pinpoint padding or margin discrepancies, I find myself at a standstill. Any assistance would be greatly appreciated. Thank you.

Answer №1

To ensure that the additional div's do not appear on the printed page, you could consider adding opacity: 0 !important; to your CSS code and then retry printing.

 .no-print, .no-print * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden;
  }

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

sequentially animating elements using animate css in a choreographed manner

I have created a unique jsfiddle with 20 boxes that I am trying to animate using the Animate.css plugin. The plugin can be found at daneden.me/animate. My goal is to animate each box one after the other in a sequential manner, but I seem to be having trou ...

What is the process of sending emails in PHP?

Seeking guidance on how to send mail through PHP with attached objects. As a newcomer, I would appreciate any assistance in this matter. Is there a specific server that needs to be installed? The email should be able to be sent from any email account. Ca ...

Is it better to store CSS and JavaScript in separate files or within the main HTML document

While the best practice is to place JavaScript and CSS code in separate files (such as .js and .css), many popular websites like Amazon, Facebook, etc. often include a large portion of their JavaScript and CSS code directly within the main HTML page. Whic ...

Extracting information from JSON and presenting it in a structured table format

I've hit a wall with this JavaScript issue on my website. I'm trying to convert API JSON data into a table, and it's working fine when the data is on separate lines. However, when I introduce nested arrays in the JSON data, everything ends u ...

Delete one object and then sequentially rename all remaining objects

object This is the object I retrieved. How can I remove module_1 object and rename the module object? For example, remove module_1 and rename module_2, module_3... to module_1, module_2... `{ "module_1": { "modulename": "mat ...

How to ensure an image or ad stays in a fixed position on the screen

Is there a way to keep a part of the screen fixed, regardless of what other elements are in that space? Do I need to merge code with the HTML code of the ad or image to achieve this? ...

How can I expand the notification pop-up in R Shiny?

I'm trying to figure out how to expand the notifications in R Shiny because right now they are cutting off longer error messages. Any suggestions? library(shiny) ui <- fluidPage( actionButton("test", "Test") ) server <- f ...

Is there a way to transform JSON into HTML with PHP?

I am attempting to reverse engineer the function referenced in this discussion: [Post][1] [1]: https://stackoverflow.com/a/23427469/19867306 @scozy demonstrated a function for converting HTML text to a JSON model. Now, I need to convert the same JSON mode ...

retrieve the class name of a reusable component in HTML

I have been assigned a web scraping project and I am required to scrape data from the following website for testing: The HTML: <div class="quote" itemscope itemtype="http://schema.org/CreativeWork"> <span class="text& ...

Tips for concealing the currently playing track title on a media player

I'm looking for a way to conceal the track title displayed in the media player on Internet Explorer. Here's the code I currently have: <object id="mediaPlayer" width="320" height="240" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type ...

Ensure that the child div fills the entire parent area when resizing the page

I am facing an issue with a container div that contains two elements. When I resize the window, one inner div moves under the other. However, my requirement is that when one div moves under another on resizing, the first div should occupy the full width o ...

Simultaneously sending jQuery.ajax data while submitting a form

I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...

Creating an HTML document with unique characters

I am currently facing an issue with writing special characters in HTML. My program is designed to edit an HTML file and allow users to replace content using a text box. However, I am struggling to add characters like "ç", "á", "ö", etc. These character ...

Search for "conditions" in a basic HTML DOM parser

I encountered an issue when trying to parse information from a website using simple HTML DOM parser. My code looks something like this: <li> <p class="x"></p><p>..</p> <p>..</p> <p>..</p> <p class ...

Retrieve information using Angular's EventEmitter

Recently I started learning Angular and encountered a challenging issue that has kept me occupied for the past few hours. I have implemented a parent-child relationship between two components, with a need to share a boolean variable from the parent to the ...

Oops! The function 'ModalDemoCtrl' has not been defined, causing an error

Hey there, I'm encountering an error when using angularJS in my project. The project is built on the django framework and does not include any additional JS files. Here are some snippets of my code: JavaScript: {{ ngapp }}.controller("ModalDemoCtrl" ...

Conceal navigation options on smaller screens and enable drop-down menu functionality with Bootstrap 3

With the usage of Bootstrap 3, I have successfully hidden two menu items when the screen is resized. However, these items still appear in the drop down menu that appears on the top left (with three bars) when the screen size is reduced. Is there a way to k ...

Disappearance of attribute in asp .net TextBox

Here is my asp .net code snippet: <asp:TextBox CssClass="siteinput required" ID="TextTitle" runat="server" Width="100%" MaxLength='<%# int.Parse(Request.QueryString["id"]) == 49 ? 40 : 15 %>' placeholder="Title" required="required">& ...

The font background color appears to be malfunctioning

body { margin: 0; background-color: white; background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000); line-height:25px; } h2{ color: black; text-align: center; display: block; font-family: 'Montserrat', san ...

Android failing to adapt to font size changes set by media queries in HTML code

Recently, I've been facing an unusual issue on a Nexus 7 where changing the font-size on the HTML element seems to be ignored. Removing the smaller font size resolves the problem but creates new issues for phone displays. CSS: html { font-size: 10px ...