Attempting to utilize CSS to address a persistent problem in Chrome where the page orientation options briefly appear when printing before being hidden

I am struggling to print a webpage in landscape orientation using the chrome browser, but I don't have control over the page's settings.

You can see the issue discussed here:

Chrome Print dialogue not offering fit to page, landscape, other printing options

This problem has been persisting for some time now.

Fortunately, a helpful commenter suggested a CSS solution to resolve this issue.

By adding the following CSS code to your webapp, you can fix this problem. Google will display layout options after implementing this fix.

@page { size: landscape; }

I was considering using developer tools to add this CSS code, but my unfamiliarity with CSS is hindering me from making it work.

Can someone provide guidance on how and where exactly to include this CSS in the page's style using dev tools to force it into landscape orientation? I understand how to add CSS following these instructions, but I suspect I might be placing it incorrectly.

Although I couldn't find a style requesting portrait mode to modify or remove, I believe there are numerous ways to accomplish this that I am unaware of.

EDIT:

Thanks to @Rojo's suggestion, I managed to utilize the technique outlined here to add the necessary CSS. Furthermore, by referring to this resource, I converted the code into a snippet for easy reusability on any problematic pages.

Below is the code snippet:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '@page { size: auto; }';
document.getElementsByTagName('head')[0].appendChild(style);

Answer №1

If you need to add some custom styling, simply copy this code and paste it directly into the browser console.

var newStyle = document.createElement('style');
newStyle.type = 'text/css';
newStyle.innerHTML = 'your content here';
document.getElementsByTagName('head')[0].appendChild(newStyle);

This script will generate a fresh style tag and append it to the header section of the webpage.

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

Issue in Laravel5.8: Unable to collapse the HTML code retrieved from the database

How can I display HTML code from the database without affecting the functionality of the Collapse feature? The Collapse feature works fine when I don't decode the HTML, but it stops working when I decode it. Why is this happening? <!-- START TAB ...

Is it possible to attach the entered URL to an image following the text that has been inputted?

I've coded everything but the jquery part isn't working. Enter URL :<input type="text"> <button id="btn"> continue </button> <div contenteditable="true" id="bod"> Click here to start typing</div> $(document).ready( ...

When using JavaScript, links within the window.location are automatically altered

When using window.location (.assign, .replace, .href) to redirect to a product page on click, I encountered an issue where it automatically changes some of the href links. For example: instead of "previous href= 'commercial/fonts/fonts.min.css' ...

Setting minimum date on Bootstrap datepicker in Asp.net core: A quick guide

This form uses the native bootstrap datepicker input. I'm trying to establish a minimum date that the user cannot select by clicking, but my current method is ineffective. What is the correct approach to make this function properly? Here is the cod ...

Using CSS on a randomly selected div that is chosen after dividing the main div each time it is clicked

Imagine a square box displayed as a "div" element. When you click on it, it splits into an n x n grid with each square having a random background color. However, the issue I am encountering is that I want to apply additional CSS to each of these randomly c ...

Looking to display or conceal several divs according to the option selected from a dropdown menu?

I've been searching for a solution to my simple dropdown issue, but haven't had any luck in the forums. This is the code for the dropdown: <select id ="category_faq"> <option value="1">item1</option> <option value= ...

What changes can be made to the HTML structure to ensure that two form tags function separately?

Hey there! I'm currently tackling a web project that involves incorporating two form tags on one page, each with its own distinct purpose. Nevertheless, it appears that the inner form tag isn't behaving as it should. My suspicion is that this iss ...

Using the base tag in Angular HTML5 mode can cause script links to break

Issue Following the configuration of a base tag to enable Angular 1.x in HTML5 mode, encountering an error where the browser (Chrome) sends requests to an incorrect path for scripts when directly accessing the app via localhost:3000/resource/id. Specific ...

Retrieve a distinct HTML onclick event using VBA

I need some assistance because I have a major issue that I can’t solve or find help for online. Here is the code I am dealing with: <span class="test taLnk hvrIE6" onclick="ta.trackEventOnPage('Hotel_Review' ,'URL_HOTEL|text|2| ...

Retrieve the API array index by checking the value of the 'Name' field

I am looking to compare the name of a button I click on with an array in order to find the matching name and then select the corresponding array number. Currently, I have a For loop that retrieves information from every team in the array, but I only requi ...

Guide on utilizing the list of names in a POST request

<td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/> </td><td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/></td><td class="widht200"> <input type=" ...

Implementing image max-width and maintaining aspect ratios for responsiveness

Within the code snippet below and utilizing Bootstrap, a grid layout is defined with several .block components, each comprising an image and a title. The images are designed to be larger than the column size so that they can expand to full width for respon ...

Ways to enhance a website by adding a custom calculated column

I'm feeling a bit lost and in need of some technology advice. What is it that I truly desire? Picture this scenario: You land on a website and come across a table/div setup that looks something like this: <div class="a"> <div class="pri ...

Positioning an absolute element inside a relative parent with a defined maximum width

I am attempting to position #header-supporter at the bottom right of #header-image, with overlapping elements. The challenge lies in setting a max-width of 1280px on #header-supporter-cont to maintain consistency with the site's margins. I have tried ...

Issue with setting a custom background image for the object header in WordPress from HTML conversion

I am in the process of converting an HTML template into WordPress to make it easier for users to edit. I have tried adding front page header slider images and content into a customizer object so that users can easily customize their site. Users can go to A ...

Tips for creating a function that utilizes a select option value

I'm struggling with a form that includes two select inputs. I want the second input to only be enabled if the first one has been selected. I attempted using an onclick event, but it didn't work out as expected. Can anyone provide assistance? (apo ...

Saving Style Sheets in a Database

Currently, I am interested in saving CSS data in a mySql database as part of my LAMP setup. My intention is to create an input field that includes the following code: body{ background: url("http://google.com/image.jpg") no-repeat; color: orange; } #someDi ...

Ways to prevent the input value from rising on a number type input when the up button is pressed

I'm curious about whether it's possible to prevent the input value from increasing when I press the up button on a type number input. Any ideas? ...

What is the best way to show an error message on a field when using a custom form validator?

In my JavaScript code, I have created a form validator that is capable of validating different input fields based on specific attributes. However, I need assistance with implementing error handling and scrolling to the erroneous field. For each <input& ...

I wish to input a continuous flow of information from a JavaScript file into an HTML text box

Being an absolute beginner in the coding world, I recently attempted to create an app for a Tizen device (Samsung Gear S) that could read and display heart rate data. Initially, I utilized templates and tried writing data to the filesystem but faced some c ...