Several instances of @page found within the CSS file

Is it possible to include multiple @page elements in a single HTML file? I am interested in this approach for printing various documents:

For example, there are multiple invoices, each consisting of multiple pages. The first page of each invoice needs to have a different top margin (1in) compared to the following pages of the same invoice (3in).

Adding @page first { will change the top margin for the first page, but the issue arises when a new invoice begins after a few pages. The new invoice requires a top margin of 1in, but being a subsequent page, it defaults to 3in.

An ideal solution would be to have multiple @page declarations, allowing for the creation of a new @page at the beginning of each new invoice to specify the desired 1in top margin.

I hope this explanation is clear, and I appreciate any assistance you can provide. Thank you!

htmlcss

Answer №1

From what I gather, you're trying to generate a printed version of a web page that contains multiple invoices. If that's the case, using @page :first will only impact the layout of the first invoice. Have you considered utilizing CSS for page breaks instead? For example:

@media print {
    body {
        margin: 2in 0;
    }
    .header {
        margin-top: -2in;
    }
    .footer {
        page-break-after: always;
    }
}
@page {
    margin: 1in;
}

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

Opening a Text File via an ASPX Web Page

Currently, I am immersed in a Web Pages project. The goal is to retrieve text from a Text File and display it within a div element. To achieve this, I utilized the ajax xmlhttprequest method, following a tutorial available at http://www.w3schools.com/ajax/ ...

javascriptjqueryhtmlasp.netajax

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

htmlcsssass

Toggle the visibility of the navigation bar in Angular based on the user

I have implemented rxjs BehaviorSubject in my login page to transmit data to auth.service.ts, enabling my app.component to access the data stored in auth.service.ts. However, I now require the app.component to detect any changes made to the data in auth.se ...

htmlangulartypescript

Conceal/reveal specific sections of a table cell using jQuery

Here is a table I have: A header Another header First (some-text-initially-hidden) click row Upon clicking, it changes to: A header Another header First (some-text-should-be visible now) click row However, the text "some-text-initially-hi ...

javascripthtmljquerycsshtml-table

Develop a straightforward static webpage and set it up by installing and launching it using NPM

I am attempting to craft a straightforward HTML page that incorporates CSS/JS and utilizes npm. The objective is to construct a basic page that can be accessed by simply using "npm install" and "npm start". As an example, I will design a page with HTML, ...

htmlnode.jsnpmvue.js

JQuery script fails to load in the head section while dynamically generating an HTML page with JavaScript

Using JavaScript, I have created a new window dynamically and added some HTML code to it. However, when I try to insert a script link into the HTML head, it fails to load when the window is open. <script type="text/javascript"> function newWindo ...

javascriptjqueryhtml

What is the best way to test the output of HTML code in a unit test scenario

I am new to web development and testing, taking it slow. I have a website with a button that reveals information when clicked. How can I create a test case to ensure that the displayed output is correct? I need to verify that the text appears on the scre ...

javascripthtmlreactjsunit-testingjestjs

Unexpected behavior observed with Mui theme breakpoints

I have defined breakpoints for my MUI React-based app like so export const lighttheme = createTheme({ palette: palette, typography: typography, breakpoints: { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, ...

cssreactjsmaterial-uibreakpoints

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

javascripthtmlangularjs

Click on the button to convert the content of the text area into a variable

Is there a way to capture all the text inside a textarea or input field as a variable upon button click using jQuery or JavaScript? The .select() function doesn't seem to achieve this, instead displaying numerous CSS properties when logged. What app ...

jqueryhtml

Dynamic divs to occupy the rest of the available vertical area

I have been experimenting with a new website layout and created a form setup. However, I am facing an issue with the fluidity of the layout. While the items are floating into position, there is a problem where if the item on the right is 400px bigger than ...

htmlcssfluid

Guide to building a robust tab system using JQuery and Ajax

I am currently working on a mockup page where the accordion feature is functioning well. However, I am looking to implement a tab-like system that will allow users to navigate between different pages. Specifically, I want users to be able to click on page ...

jqueryhtmlajax

What are the steps for me to generate my own unique HTML tag?

Is there a way to create my own custom HTML tags in HTML or HTML5 so that I can develop my unique HTML tag and CSS library like: <mymenu> ul li or some text </mymenu> <heading> Yeah My Own Heading</heading> If yes, please guide m ...

html

Having issues with implementing the Bootstrap form-check-inline feature

I have been attempting to utilize the form-check-inline feature from Bootstrap Forms without success, as it seems to be stacking checkboxes vertically instead of inline: https://i.sstatic.net/paLTC.png This is the code snippet I am working with: <h1& ...

htmlcssbootstrap-4

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

I'm seeking a way to access the input element within the InputGroup component of BlueprintJs in my

The BluePrintJS React InputGroup component offers a convenient user interface for modern applications. However, it does not provide direct access to the internal <input> element. There are two primary reasons why I need to access the input element: ...

cssreactjstypescriptblueprintjs

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

Error: Syntax error: unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\xampp\htdocs\Source Code\displaysalesdetailed.php on line ...

phphtmlcssbootstrap-4error-handling

The RSS feed is stretching beyond the limits of the table's height

Seeking assistance to adjust the height of an RSS feed widget on my website. The widget is from RSS Dog and I do not have access to the style.css file as it is hosted externally. Despite trying to modify the JavaScript code provided by RSS Dog to set the h ...

javascripthtml

How can I extract echoed information from PHP after submitting form data through jQuery Ajax?

I am looking to transfer a file from an input form to a php script using ajax and handle the response echoed by my php script. Here is my HTML form: <form id="fileUploadForm" method="POST" enctype="multipart/form-data"> <input name="fileToU ...

javascriptphpjqueryhtmlajax

Float and tap

Can someone assist me with my code? I have 4 identical divs like this one, and when I hover over a link, all the elements receive the same code. <div class="Person-team"> <div class="profile-pic-d"> <a cl ...

javascriptjqueryhtmlcss