Is it possible to utilize CSS and the @media print feature to ensure that a single page is displayed in a 2up landscape format?

I'm working on a website: where the client needs to print the page for flyers.

There are a couple of issues:

Two extra blank pages are showing up before and after the actual content.

In addition, the client wants the schedule printed in landscape mode with two schedules per page.

This is what my current CSS looks like:

@media print {
  body {
    visibility: hidden;
  }
  .noprint {
    visibility: hidden;
  }
  div.printarea {
    margin:0;
  }
  div.printarea * { display:block; visibility:visible; }
  @page {
    size: landscape;
    
  }
}

Any advice or assistance would be highly valued.

(Please note that this site was built using React/NextJS)

javascripthtmlcssnext.js

Answer №1

To begin with, a helpful way to troubleshoot why a new page is being added is to add borders to all elements and inspect for any extra margins or paddings.

* { border: 1px solid red;}

By doing this, you can prevent blank pages from appearing

html, body { height: auto; } or `height: 100vh`

You can also experiment with the following:

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

To enforce a landscape orientation when printing, adjust the @page property in your CSS like so:

@media print{@page {size: landscape}}

Answer №2

To prevent empty pages from printing, you can control page breaks using page-break-before and page-break-after

div.printarea:last-child {
     page-break-after: auto;
}

div.printarea:last-child {
     page-break-before: auto;
}

If you want to switch to landscape view, you can rotate the page with the following code snippet

<style type="text/css" media="print">
    div.printarea
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

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

Using handlebars template to render multiple objects in MongoDB with node.js and mongoskin

Dealing with an application that requires reading from two different collections in a Mongo database and passing the returned objects into a handlebars template has been quite a challenge for me. The code snippet I've been working with doesn't s ...

javascriptnode.jsmongodbmongoskin

Tips for organizing a Material UI DataGrid table effectively while keeping the total sum rows within the DataGrid unaffected

Check out my codeSandbox link here: https://codesandbox.io/s/making-sum-of-column-in-datagrid-mui-zjzfq6?file=/demo.js I've noticed that when I sort by ascending, the subtotal, total, and tax rows move up, but when I sort by descending, they move dow ...

javascriptreactjsmaterial-uidatagridmui-x-data-grid

Using Three.js to display multiple objects simultaneously causes my browser to crash

When it comes to rendering objects in a scene, I encountered an issue with loading multiple objects. Initially, loading all 3 objects as STL files worked fine. However, when I attempted to divide each object into multiple surfaces and create BufferGeometry ...

javascriptthree.js

I'm encountering an issue with my API Key being undefined, despite having it saved in both an .env file and as a global variable

While attempting to retrieve information from an API, I encountered an issue where the key I was using was labeled as "undefined". However, after manually replacing {key=undefined} with the correct string in the network console, I was able to successfull ...

javascriptreactjs

Retrieve information by utilizing query string parameters in Next.js

When using my getInitialProps function, I make two requests to fetch data. Now, I want to add a condition to make an additional request if the query params key is for a legal person. For example, if the URL is https://www.example.com.br/?legal-person, I n ...

javascriptnext.jsquery-string

I am interested in verifying the presence of the exampleClass HTML element using its element ID with the help of JS/JQuery

Recently I started learning front-end development and I am curious about the functionality of some front-end elements. Specifically, I am interested in checking if an HTML element with a specific ID has a certain class using JS/JQuery. <div class=" ...

javascriptjqueryfrontend

Error: The API is unable to retrieve data on dynamically generated pages in a NEXT

My Next.js dynamic page is not fetching data from any API I've been facing an issue with my dynamically generated Next.js page that should retrieve data from an API, but it doesn't seem to be working. Even though I have written the code to fetch ...

reactjsnext.jsroutes

What methods can be used to expand the spacing between elements in a PrimeFlex grid?

It seems like the PrimeFlex gap classes are not working properly with the grid layout. Is there a way to adjust the gap size without creating additional rows? <div class="grid gap-1"> <div class="col-6"><p-button label ...

cssprimeflex

Preserving the active tab in JQuery while dynamically regenerating tabs due to database updates

I have one default static tab and two dynamic tabs that are generated based on database records. Whenever there is a change in the database, I use the $('.dynamic').remove(); JQuery remove method to refresh the elements dynamically. The dynamic ...

javascriptjquerytwitter-bootstraptabs

A guide to performing a LEFT JOIN on two JSON data sources from external URLs

I've been attempting to achieve the following outcome using external JSON data but haven't had any luck finding a solution on search engines or forums. Can anyone provide assistance with this? Thank you in advance. people = [{id: 1, name: "Tom" ...

javascriptjsonalasql

End the HTML page once the Flash (SWF) animation comes to a close

I have successfully exported my flash file to an HTML page. How can I make the page close automatically once the flash animation is finished? While I can use actionscript to stop the animation, I need the entire page to shut down on its own. I attempted u ...

javascripthtmlactionscript-3flash

Parameterized Azure Cosmos DB Stored Procedure

I am currently learning about Azure Cosmos Db, and I am in the process of developing a simple JavaScript stored procedure that will return a document if a specific Id is provided. However, when I run the stored procedure, I do not receive a "no docs foun ...

javascriptazure-cosmosdb

Using Node.js, Express, and Socket.IO to establish real-time communication between two static client pages

I'm in the process of creating a remote control for a gallery using nodejs, express, and socket.io. Here's the project structure: /index.js /public/screen.html /screen.js /remote.html /remote.js The goal is to display a gallery of ima ...

javascriptnode.jssocketsexpresssocket.io

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text w ...

javascripthtmlcssbootstrap-5

Obtain access to global.window.localStorage within getServerSideProps

I have a component that receives props with data and renders the data. In my functionality within the getServerSideProps, I am attempting to retrieve data from localStorage. However, due to window being undefined, I am unable to do so. I have tried using ...

javascriptnode.jsreactjsnext.js

Submitting Form data to MySQL database with Node.js using Express framework

Currently, I'm working on a server.js file in Node that is intended to send form data from an HTML file to MySQL. However, I seem to be encountering a syntax error with my code. Below, you'll find the code snippet along with the specific error me ...

javascriptmysqlnode.jsexpress

Analog Clock Time Adjustment Bubble Deviation Dilemma

Recently, I encountered an issue with an analog clock component. Every time I click on the time adjustment bubble repeatedly while also moving the cursor position, it tends to drift away from its original placement, which should ideally be between an orang ...

javascripthtmljquerycss

Printing JSON data with multiple rows in HTML

How can I display multiple rows returned by JSON using my JavaScript function? function getScheduleDate() { //alert("enters1"); //var usrname= getParameterByName('uname'); var postVal=$.post('http://localhost/ipack/salesvisit.ph ...

phphtmljson

Why is it that nested array objects do not function properly in a React component?

There is a grid component that receives a prop as searchElement to render the search segment of the grid. Some dropdown options are empty and should be filled by an async request after the component is mounted. After I call an async fetch in componentDidMo ...

javascriptreactjs

Should you include the dollar sign in a Vue HTML variable or not?

I’m a bit confused about whether or not I should include $ when using a Vue HTML variable: new Vue({ data: { a: "myData" } }); Do I need to use: <h1>My value is {{ a }}</h1> or <h1>My value is {{ $a }}</h1> What ...

javascripthtmlvue.js