Adjusting print page size according to the class of a specific element using CSS

I am currently working on a single page application and I have the need to print the page with either landscape or portrait orientation based on the class of a specific div element. The challenge is that I want to achieve this using only CSS and without any JavaScript.

For instance, let's say I have a default size for printing

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

However, my goal is to resize it if the block with the class "frame" has a modifier called "media"

Unfortunately, the following code does not work as intended:

@media print {
  @page .frame ._media {
    size: portrait
  }
}

Answer №1

It's not possible to add a selector with @page as you mentioned. Only certain pseudo classes can be added for this purpose. More information can be found here:

https://developer.mozilla.org/en/docs/Web/CSS/@page

If you prefer using only CSS and no JS, a workaround could be creating two different stylesheets (for example style1.css and style2.css) and including them based on the required class.

style1.css:

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

and style2.css:

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

This is how you can set two different @page rules without using JS. Otherwise, JavaScript can also be used for more flexibility.

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 conceal elements that do not have any subsequent elements with a specific class?

Here is the HTML code I have, and I am looking to use jQuery to hide all lsHeader elements that do not have any subsequent elements with the class 'contact'. <div id="B" class="lsHeader">B</div> <div id="contact_1" class="contac ...

Challenges with HTML and Session Handling

It's not functioning properly! <?php session_start(); ?> <p class="username"><?php echo $_SESSION['name']; ?></p> ...

Leveraging SVG filters for enhancing text with unique borders

I recently discovered a helpful tip on adding a background to text in SVG using a source. However, I am still unsure how to incorporate a border around the text. <svg width="100%" height="100%"> <defs> <filter x="0" y="0" width="1" ...

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards a ...

What is the best way to assign both first and last names to an array with keys and values, then showcase the result?

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8> <title>practice session</title> </head> <body> <!-- $name1 = first--> <!-- $name2 = last--> <?php echo " ...

Error: Unable to execute $(...).stellar since it is not a recognized function

Having some trouble implementing the stellar plugin. I've included all the necessary js, but keep getting an error in the dev tools console: 'Uncaught TypeError: $(...).stellar is not a function'. Here's what I have in the head tags: ...

Ways to eliminate the .html extension when someone accesses your static website

My current setup involves a static website being served by nginx. For example, when visiting www.mydomain.com, it displays as www.mydomain.com/index.html. Is there a way to avoid the trailing .html and have www.mydomain.com/index displayed instead? I&ap ...

Is it better to use multiple external style sheets?

Hello! I am looking to implement a pop-up login screen by integrating downloaded code. The issue I am facing is that the CSS file that accompanies it clashes with my current one. Is there a way to have a specific style sheet only affect certain div tags, ...

Horizontal JQuery Slider for CategoriesDiscover the smooth, sleek category navigation with

Looking to create a sliding horizontal menu with various categories using a clever div layer setup. The goal is to have one fixed-width div containing another wider div, with only a portion of the second one visible at a time. Encountering two challenges ...

Can text be formatted differently based on its length and whether it wraps onto multiple lines?

Looking to display book titles on a webpage with varying lengths. Some are short enough to fit in one line, while others are longer and wrap onto two lines. Is it possible to apply different styles (such as color or line-height) for these two cases using ...

Send the completed form to a designated web address

Here's the form I'm working with: @using (Html.BeginForm("Search", "Home", FormMethod.Get, new { enctype = "multipart/form-data", @class = "navbar-form navbar-left form-inline", @role = "search" })) { var numberOfVi ...

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Currently, I'm in the process of developing a specialized rails application. However, there seems to be an unusual rendering error that has been reported by Safari 4 users. It's quite peculiar because the page appears briefly but quickly disappea ...

Ways to remove the default classes added by ngbootstrap

My current challenge involves utilizing ngbootstrap for popovers, yet desiring to override its default styling. Specifically, I have a form that should function as a popover triggered by a button click, and it needs to maintain its own distinct styles. Up ...

Unable to load circles on page refresh with amCharts Maps

I am experiencing an issue with the functionality of my amCharts maps. Whenever I refresh the page, the circles that are supposed to be displayed disappear. However, when I zoom in, the circles reappear. This problem has me puzzled, and I'm not sure ...

The background image fails to display

Having some trouble with setting an image as the background using CSS. When I directly input the image URL, it shows up fine with this code: background: url('images/image1.jpg); However, I would prefer to use this CSS code instead: .masthead { m ...

Disruption of HTML file content

When I open my HTML file directly, the entire content appears messed up. However, when I view it through live preview in Brackets, everything looks fine. What could be causing this issue? Keep in mind that I am using CSS and JavaScript files from Bootstr ...

Using `vertical-align` on a `span` inside a flexbox container may not produce the desired result

Some users are experiencing issues with the vertical-align: middle property not working on a span. .tc__timezone-toggle { display: flex; } .tc__timezone-toggle span { vertical-align: middle; } .tc__timezone-toggle-ui { display: block; font-wei ...

Styling an input text using CSS and Jquery without relying on a parent

Styling CSS input text without a parent div Hello everyone, I am looking to remove the <div id="input_container"> from the code below. Is it possible to achieve the same result without that surrounding div? Check out the jsfiddle: http://jsfiddle.n ...

Selecting radio buttons using Bootstrap and JavaScript

I'm interested in incorporating this bootstrap radio selection feature into my JavaScript code. For example, if option1 is true, I want to execute a specific action... How can I achieve this? <div class="alert alert-info" role="alert"> < ...

Determine the elapsed time in seconds between two specified moments

I am trying to implement two input fields in my HTML, one for a starting point and another for an end point. The user will enter two times like this: For example: [8:15] - [14:30] alert("XXXXX seconds") I want to calculate the number of seconds between 8 ...