Preserving the dimensions of an expandable div

Is there a way for a div to maintain its print layout while still allowing for zooming?

I attempted to enable zoom functionality on a div using jQuery to adjust the height and width percentages of a specific div with the ID "page".

<div style="
height: 70%;
width: 70%;"
id="page">

By default, the div has 70% width and 70% height. Pressing the + button increases both by 5% (up to a maximum of 100% each), while pressing the - button decreases them by 5% (with a minimum of 10% each).

However, when attempting to convert the final product into a PDF, the modified height and width do not revert to the defaults. As a result, the content within the div either doesn't fit properly in the PDF or becomes too small to read.

https://i.sstatic.net/R5gtr.png

The desired effect is similar to what is displayed on a website called Zety.

Answer №1

Give this a shot:

@media print {
   #page {
      height: 100%;
      width: 100%;
   }
}

UPDATE:

In case you are utilizing jQuery to alter the style attribute directly, it may be necessary to include !important in the CSS rules. It is advisable to use jQuery for adjusting the CSS of the div#id rather than the html style attribute:

$("#page").css("width",70%);

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

Acquire information from a website utilizing an ajax function with VBA in Excel

I'm looking to scrape information from and transfer it into an Excel sheet. The challenge I'm facing is that the webpage utilizes an ajax function and does not have individual elements for each entry. Here's a snippet of the HTML code in qu ...

retrieving data from the database table

I'm having trouble retrieving specific values from a table. No matter what input I provide, I always get results from both rows. I want to match the input ID with the ID in the table. The code I'm attempting to use can be found in the attached im ...

Using the <select> element for converting selection from C# to JavaScript

I have a ViewBag.List where I store information about competitions and their respective teams. For example, the list includes the Premier League with teams like Arsenal and Chelsea, as well as the Bundesliga with teams like Bayern Munchen and Wolfsburg. I ...

What strategies exist for leveraging jQuery with predefined events?

Is there a set of guidelines for incorporating predefined events into a jQuery plugin? Take for instance the unique features of the Zebra Accordion plugin (an efficient accordion plugin for jQuery) or any other plugin that defines specific events like bel ...

Issues with custom logo and menu/sidebar toggle on Wordpress

Hello everyone, I am currently facing some difficulties with my new WordPress blog that utilizes the Skilt-Theme. Specifically, I'm having trouble with the custom-logo and sidebar-toggle features. When there is no logo present, you can see the layout ...

The webpage becomes unresponsive and gets stuck when sending a stream of requests to the web server via ajax

I am currently working on creating a signal on the webpage that displays either a green or red color based on values retrieved from a database. However, when I send a request after 10 seconds, the page appears to freeze and becomes unresponsive. I am strug ...

Wide container using Bootstrap

Currently, I am incorporating Bootstrap v5 alpha to develop a basic dashboard. According to Bootstrap guidelines, it is essential to utilize .container, .container-fluid, or .container-{size}, followed by .row and .col columns. However, I wish for the das ...

Creating a Node API that can patiently listen for external data

My current project involves building a server that fetches data from an external API and returns it to the endpoint localhost:3000/v1/api/. However, I'm facing a challenge where the data retrieval process takes approximately 2 seconds, leading to empt ...

Encountering an error when using JSONP with a period in the callback function

I am currently facing an issue with making an ajax jsonp call. It seems that the json returned contains a dot in the callback function, as shown in the example below: ABCD.render_section({ "page": { "parameters": { "pubDate": "2013-06-05 00:00:00.0", ...

How can you link a Razor Function to a JavaScript Variable?

Trying to incorporate a Razor C# Function into a JavaScript Function has been a challenge for me. While it's simple to do in HTML, I'm encountering compilation errors when attempting it in JavaScript. I've experimented with the <text> ...

The issue with setting width using % in React Native is causing trouble

While working on my project using expo react native, I encountered an issue with a horizontal scrollview for images. When I style the images using pixels like this: <Image code... style={{width: 350}}/>, everything works fine. However, if I try to ch ...

Locate an item within a JavaScript array

Similar Question: Javascript - Checking for value in array Can you spot the issue here? var zipCodes =(['90001','90002','90003']); Determine if a specific value is present in the array zipCodes if('90001' in ...

Understanding how to display a component within another component in Vue.js

I am faced with a scenario where I have a component that has the following template: <div v-for:"item in store" v-bind:key="item.type"> <a>{{item.type}}</a> </div> Additionally, I have another component named 'StoreCompone ...

Nodemon fails to restart: [nodemon] attempting restart because of modifications

I ran the command: npm run server Despite my attempts to find a solution, I am still puzzled as to why the results are not working. Even after globally installing npm install -g nodemon, the server still does not restart automatically and only displays me ...

I need to generate table rows using v-for and include a unique value in the 'id' attribute of each row

I am creating table rows dynamically in a view using Flask data. <tr id="<% file.id %>" v-for="file in fileList"> <td><img class="thumbnail_preview" src=""></td> <td><% file.filename %></td> <td> ...

Whenever I attempt to generate a forecast utilizing a tensorflow.js model, I encounter the following error message: "Uncaught TypeError: Cannot read property 'length' of undefined."

I'm currently working on a project to build a website that utilizes a deep learning model for real-time sentiment analysis. However, I've encountered an issue when using the model.predict() function. It throws an error message: Uncaught TypeErro ...

Spinning Wheel with Ajax in jQuery Mobile

When loading Ajax data for the next page, I am trying to display a spinning wheel. Interestingly, I can see the Ajax start and stop events in the console log, but the spinning wheels are not visible on the page! $(document).ajaxStart(function(){ conso ...

Background above another background, enveloping the surrounding elements

Currently, I am diving into the world of html/css/js/jquery coding, and after days of searching for answers, I am attempting to create a sleek website. My main question is regarding how to achieve the following design: I am struggling to create the "borde ...

I am looking to develop a unique event that can be triggered by any component and listened to by any other component within my Angular 7 application

Looking to create a unique event that can be triggered from any component and listened to by any other component within my Angular 7 app. Imagine having one component with a button that, when clicked, triggers the custom event along with some data. Then, ...

There is a delay in updating ng-if/ng-hide in real time on the HTML page

Assistance needed for implementing a slight adjustment in AngularJS with TypeScript. The requirement is to change the text of a button for 3 seconds upon clicking, then revert back to its original text. Two HTML elements are created for this purpose, each ...