Creating a single div with content that spans the entire page when printed

I am working on an Aurelia app that requires printing out labels. The challenge I am facing is getting a hidden div on the page, containing the label layout, to be printed in full size and stretched to fit the entire page in landscape orientation. Currently, the div only occupies a small corner of the page.

For those interested, you can view the JSFiddle here.

I have attempted to use CSS to achieve this, but changes to the @page properties seem to have no effect. I have tried adjusting page sizes as well, but the div remains stuck in one corner.

@media print {
  header, footer, .print-hidden {
    visibility: hidden;
  }

  @page {
    size: auto;
    margin: 0mm;
  }

  html, body {
    height: 100%;
    width: 100%;
  }

  .print-show{
    display: block;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
  }
}

This is the Aurelia template structure for the label:

<template bindable="firstname, lastname, company, inviter, uniquecode">
<div class="label-container">
<div class="row justify-content-start mx-0 px-1 pt-1">
    [...] <!-- Template continues with label details -->

Below are the custom CSS classes used for styling the label components:

.label-container{
  width: 350px;
  height: 188px;
}

[...] <!-- Custom CSS styles for different label elements -->
htmlcssaurelia

Answer №1

I made some adjustments and included a background color to enhance the appearance. I trust this meets your requirements. If not, it was quite enjoyable to work on it :P.

<!--index.html-->
<div class="label-container">
  <div class="label-container__header mx-0 px-1 pt-1">
    <div class="text-center">
      <img class="label-logo" src="image.png">
      <div class="visitor-logo">VISITOR</div>
    </div>
  </div>
  <div class="label-container__names label-name">
    <div>${firstname}</div>
    <div>${lastname}</div>
  </div>
  <div class="label-container__company label-company">
    ${company}
  </div>
  <div class="label-container__footer justify-content-between mx-0 px-1">
    <div>
      <div class="label-guestof">Guest of</div>
      <div class="label-inviter">${inviter}</div>
    </div>
    <span>${uniquecode}</span>
  </div>
</div>

// style.css
html, body {
  height: 100%;
  width: 100%;
}

.label-container {
  width: auto;
  height: 100%;
  background-color: #aaa;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.label-container__header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.label-container__names {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label-container__company {
  display: flex;
  justify-content: center;
}

.label-container__footer {
  display: flex;
  justify-content: flex-end;
}

.visitor-logo{
  font-weight: normal;
  font-size: 15px;
  color: #505659;
}

.label-name{
  font-weight: 600;
  font-size: 28px;
  color: #2B3033;
}

.label-company{
  font-weight: normal;
  font-size: 12px;
  color: #737B80;
}

.label-guestof{
  font-weight: normal;
  font-size: 10px;
  color: #737B80;
}

.label-inviter{
  font-weight: 600;
  font-size: 12px;
  color: #505659;
}

.label-logo{
  height: 28px;
  width: 60px;
}

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's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

javascripthtmlcssforms

Checkboxes and the adjacent selector

Looking for a way to change the background color of a label when the corresponding checkbox is checked? Take a look at the code snippet below to see how it can be done: .viewbutton { height: 48px; width: 48px; background-color: #FFFFFF; border-r ...

htmlcsstwitter-bootstrapbootstrap-4

Is JavaScript necessary for this task in PHP?

Hi everyone, I recently discovered a way to style a PHP echo in a more visually appealing manner. Instead of presenting an unattractive colored box right away, I was wondering if there is a way to only display the box when the user selects the calculation ...

javascriptphpjqueryhtmlcss

Struggling with overlaying Bootstrap modals on top of each other

This idea is inspired by the topic Multiple modals overlay I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal. To see how it functions, please run the code below ...

javascripthtmljquerycssbootstrap-5

Retrieve the file name of the webpage from the URL bar

Is there a way to retrieve the page name from the address bar using jquery or javascript instead of PHP? I am working on an HTML website and would prefer not to use PHP for this specific task. For example, if the address is www.mywebsite.com/hello.htm, ho ...

javascriptjqueryhtml

Google App Engine displaying a blank screen error

I've been playing around with this concept where there's a table of 'events' on a '/search' page. When the 'GO' button of an event is clicked, it should increase the 'RSVP' count for that event and redirect ...

pythonhtmlgoogle-app-enginegoogle-cloud-datastore

Changing the Width of a Material Icon

I'm currently working with Angular and Angular Material, and I have a md-button that includes both an icon and text. You can view it here: http://jsfiddle.net/u7fp5wxv Here is the code snippet for reference: <md-button layout="row" style="width: ...

cssangularjsangular-material

What is the best way to prevent images from being loaded with broken links?

Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...

javascripthtmlangular

Crafting artistic shapes using the Canny Edge Detection technique on Canvas

Can someone provide some guidance on using Canny Edge Detection to generate shapes in Canvas? ...

javascripthtmlimage-processingcanvascanny-operator

What is the best way to ensure that a header with SVG graphics is SEO-friendly and accessible to screen readers?

My website currently features an <h1> tag with an SVG logo, but unfortunately it is not accessible to webcrawlers and screen readers. What steps can I take to ensure that it can be properly accessed by them? ...

htmlseoaccessibility

Tips on adding conditional styles in Next.js

This is my attempt: function ChangeStrokeToTextAndImage(properties: ChangeStrokeToTextAndImageProps) { return ( <div className={ styles.container0 + " " + properties.isLightGreenBackground == true ? styles.isLight ...

cssnext.js

Fixed and percentage widths in horizontal divs for children, with the percentage width exceeding the desired size

Here's the code snippet I'm working with: http://pastebin.com/W3ggtgZB. The body of this code can be found here: http://pastebin.com/2tkmhnfW. My goal is to create a div containing two child divs. One child div should have a fixed width, while t ...

htmlsizewidthpercentagechildren

Malfunctioning jQuery Plugin

Currently attempting to implement a jQuery plugin to achieve a pagination effect similar to The plugin I came across is linked at Although the usage seems straightforward, I am encountering difficulties making it function correctly. Displayed below is t ...

javascriptjqueryhtmlcssjquery-plugins

Displaying a div upon clicking a hyperlink

I am currently working on designing an unordered list that serves as a family tree. My goal is to enable users to click on each section, triggering the appearance of a new div in the center of the screen containing relevant details about that specific pers ...

jqueryhtmlcss

Tips for displaying a page within a parent div upon clicking a button in a child div

Hey there, I'm new to scripting and I've run into a problem. I'm trying to figure out how to load a page in a parent div when clicking buttons in a child div. Specifically, I want to load a specific page in the parent div. Just to clarify, t ...

javascripthtmljquery

Updating image URL for grouped objects with Fabric JS

Check out this link :http://jsfiddle.net/mishragaurav31/ang58fcL/#base I created two groups of objects; one consisting of a circle and text, and the other with two images. When I try to change attributes for group 1, it works fine. However, when attempt ...

javascripthtmlfabricjs

How to modify the styling of an input element in React without directly manipulating the input itself

I have collected responses from a survey I created and now I want to showcase the results. The responses are rated on a scale from 1 to 5, and I would like to display them similar to the screenshot. Each number should be presented within a square, with ...

cssreactjsinput

Tips for utilizing background-position and background-size in CSS while also positioning an image at a specific location

My current layout is achieved using background-position: center and background-size: cover. Take a look at the image here: https://i.sstatic.net/552RA.png, originally sourced from this link. I am aiming to modify the appearance of the layout to resemble t ...

htmlcssimagebackground-position

What is the best way to automatically update the contents of a div that contains PHP variables

Recently, I created a new page called queries.php <?php require("connection.inc.php"); $query = "SELECT SUM(john), SUM(robert), COUNT(school) FROM election"; $result = mysql_db_query($db, $query, $connection) or die("query error!"); $data = mysql_fetc ...

javascriptphpjqueryhtml

Issue with min-height not being recognized in Page Wrap

The code snippet provided is as follows: html ,body { height: 100%; font-style: Helvetica; } .page_background, .page { margin: 0 auto; } .page_background { width: 100%; min-height: 100%; background: -webkit-linear-gradient(#282828, #88 ...

htmlcss