DEVHIDE
Login Or Sign up

Print preview is adding one blank page

31 Views Asked by At

I can print with my code but from where a blank page is coming in print preview i do not know. Also, first page should be as per the width and height of div. Print preview should show only the div with class .canvasSaveder.

<style>
    /* Style for the canvasSaveder div that holds the image and input fields */
    .canvasSaveder {
        position: relative;
        width: 100%; /* Use percentage width to make it responsive */
        height: 100%; /* Use percentage width to make it responsive */
    }

    /* Style for the image */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Style for the input fields */
    input {
        position: absolute;
        outline: none;
        background: transparent;
        font-size: 25px;
        border: none;
    }
    .nameA {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: center;
        width:63%;
        height: 8%;
        left: 3%;
        top: 30%;
    }
    .nameE {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: center;
        width:63%;
        height: 8%;
        left: 3%;
        top: 39%;
    }
    .nationalityE {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:23%;
        height: 8%;
        left: 25%;
        top: 49.5%;
    }
    .nationalityA {
        font-size: 23px;
        color: black !important;
        font-weight: bold;
        text-align: right;
        width:17%;
        height: 8%;
        left: 49%;
        top: 49.5%;
    }
    .department {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:53%;
        height: 8%;
        left: 13%;
        top: 58%;
    }
    .title {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:53.5%;
        height: 8%;
        left: 12.5%;
        top: 69%;
    }
    .blood {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:9%;
        height: 8%;
        left: 24%;
        top: 78%;
    }
    .expiry {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:25%;
        height: 8%;
        left: 22%;
        top: 88%;
    }
    .staffno {
        font-size: 25px;
        color: white !important;
        font-weight: bold;
        text-align: center;
        width:28%;
        height: 8.5%;
        left: 71%;
        top: 90%;
    }
    .photo {
        width: 28%;
        height: auto;
        position: absolute; /* Change the position to absolute */
        right: 1%; /* Adjust the right property to position the image from the right edge */
        top: 40%;
    }
    @media print {
        body * {
            visibility: hidden;
        }


        .canvasSaveder {
            visibility: visible;
            position: relative;
            color: white !important;
page-break-after: always !important;
        }

        /* Show the image and input fields inside .canvasSaveder */
        .canvasSaveder img,
        .canvasSaveder input {
            visibility: visible;
        }
        .staffno {
            background-color: transparent;
            font-size: 30px;
            color: yellow !important; /* Change color to white */
        }
    }
</style>

<div class="canvasSaveder">
    <img src="images/kacid.jpg" alt="Staff ID Image">
    <!-- Position input fields over the image with percentage-based margins -->
    <input id="charA" type="text" name="aname"
    value="<?php echo $aname; ?>" class="resizeME nameA">
    <input id="charE" type="text" name="ename"
    value="<?php echo $ename; ?>" class="resizeME nameE">
    <input id="natE" type="text" name="enationality"
    value="<?php echo $cename; ?>" class="resizeME nationalityE">
    <input id="natA" type="text" name="anationality"
    value="<?php echo $caname; ?>" class="resizeME nationalityA">
    <input id="department" type="text" name="department"
    value="<?php echo $dename; ?>" class="resizeME department">
    <input id="title" type="text" name="title"
    value="<?php echo $tename; ?>" class="resizeME title">
    <input id="blood" type="text" name="blood"
    value="<?php echo $blename; ?>" class="resizeME blood">
    <input id="date" type="text" name="expiry"
    class="resizeME expiry" value="<?php echo $current_date; ?>">
    <input id="staffnos" type="text" name="staffno"
    class="resizeME staffno" value="<?php echo $staffno; ?>">
    <span id="photo">
    <img src="images/employees/empPhotos/30546.jpg" class="photo">
    <span>
</div>
    
    <hr style="border: 1px solid black;">
        <button type="button" onclick="printStaffID()">Print Staff ID</button>
    <hr style="border: 1px solid black;">

<script>
    function printStaffID() {
        window.print();
    }
</script>
css print-preview
Original Q&A
1

There are 1 best solutions below

7
A Haworth On

visibility: hidden still keeps the space for the related elements.

This code has display: none for those element that are not wanted in the print:

  body *:not(.canvasSaveder):not(.canvasSaveder img):not(.canvasSaveder input) {
      display: none;
      )


<style>
    /* Style for the canvasSaveder div that holds the image and input fields */
  
  .canvasSaveder {
    position: relative;
    width: 100%;
    /* Use percentage width to make it responsive */
    height: 100%;
    /* Use percentage width to make it responsive */
  }
  /* Style for the image */
  
  img {
    max-width: 100%;
    height: auto;
  }
  /* Style for the input fields */
  
  input {
    position: absolute;
    outline: none;
    background: transparent;
    font-size: 25px;
    border: none;
  }
  
  .nameA {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: center;
    width: 63%;
    height: 8%;
    left: 3%;
    top: 30%;
  }
  
  .nameE {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: center;
    width: 63%;
    height: 8%;
    left: 3%;
    top: 39%;
  }
  
  .nationalityE {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 23%;
    height: 8%;
    left: 25%;
    top: 49.5%;
  }
  
  .nationalityA {
    font-size: 23px;
    color: black !important;
    font-weight: bold;
    text-align: right;
    width: 17%;
    height: 8%;
    left: 49%;
    top: 49.5%;
  }
  
  .department {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 53%;
    height: 8%;
    left: 13%;
    top: 58%;
  }
  
  .title {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 53.5%;
    height: 8%;
    left: 12.5%;
    top: 69%;
  }
  
  .blood {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 9%;
    height: 8%;
    left: 24%;
    top: 78%;
  }
  
  .expiry {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 25%;
    height: 8%;
    left: 22%;
    top: 88%;
  }
  
  .staffno {
    font-size: 25px;
    color: white !important;
    font-weight: bold;
    text-align: center;
    width: 28%;
    height: 8.5%;
    left: 71%;
    top: 90%;
  }
  
  .photo {
    width: 28%;
    height: auto;
    position: absolute;
    /* Change the position to absolute */
    right: 1%;
    /* Adjust the right property to position the image from the right edge */
    top: 40%;
  }
  
  @media print {

  body *:not(.canvasSaveder):not(.canvasSaveder img):not(.canvasSaveder input) {
      display: none;
      )
     .canvasSaveder {
        visibility: visible;
        position: relative;
        color: white !important;
        page-break-after: always !important;
      }
      /* Show the image and input fields inside .canvasSaveder */
      .canvasSaveder img,
      .canvasSaveder input {
        visibility: visible;
      }
      .staffno {
        background-color: transparent;
        font-size: 30px;
        color: yellow !important;
        /* Change color to white */
      }
    }
</style>

<div class="canvasSaveder">
  <img src="images/kacid.jpg" alt="Staff ID Image">
  <!-- Position input fields over the image with percentage-based margins -->
  <input id="charA" type="text" name="aname" value="<?php echo $aname; ?>" class="resizeME nameA">
  <input id="charE" type="text" name="ename" value="<?php echo $ename; ?>" class="resizeME nameE">
  <input id="natE" type="text" name="enationality" value="<?php echo $cename; ?>" class="resizeME nationalityE">
  <input id="natA" type="text" name="anationality" value="<?php echo $caname; ?>" class="resizeME nationalityA">
  <input id="department" type="text" name="department" value="<?php echo $dename; ?>" class="resizeME department">
  <input id="title" type="text" name="title" value="<?php echo $tename; ?>" class="resizeME title">
  <input id="blood" type="text" name="blood" value="<?php echo $blename; ?>" class="resizeME blood">
  <input id="date" type="text" name="expiry" class="resizeME expiry" value="<?php echo $current_date; ?>">
  <input id="staffnos" type="text" name="staffno" class="resizeME staffno" value="<?php echo $staffno; ?>">
  <span id="photo">
    <img src="images/employees/empPhotos/30546.jpg" class="photo">
    <span>
</div>
    
    <hr style="border: 1px solid black;">
        <button type="button" onclick="printStaffID()">Print Staff ID</button>
    <hr style="border: 1px solid black;">

<script>
    function printStaffID() {
        window.print();
    }
</script>

ADDITION: SO snippet is not very happy with this so here is the naked code, copy to run on your browser.

<style>
    /* Style for the canvasSaveder div that holds the image and input fields */
    .canvasSaveder {
        position: relative;
        width: 100%; /* Use percentage width to make it responsive */
        height: 100%; /* Use percentage width to make it responsive */
    }

    /* Style for the image */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Style for the input fields */
    input {
        position: absolute;
        outline: none;
        background: transparent;
        font-size: 25px;
        border: none;
    }
    .nameA {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: center;
        width:63%;
        height: 8%;
        left: 3%;
        top: 30%;
    }
    .nameE {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: center;
        width:63%;
        height: 8%;
        left: 3%;
        top: 39%;
    }
    .nationalityE {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:23%;
        height: 8%;
        left: 25%;
        top: 49.5%;
    }
    .nationalityA {
        font-size: 23px;
        color: black !important;
        font-weight: bold;
        text-align: right;
        width:17%;
        height: 8%;
        left: 49%;
        top: 49.5%;
    }
    .department {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:53%;
        height: 8%;
        left: 13%;
        top: 58%;
    }
    .title {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:53.5%;
        height: 8%;
        left: 12.5%;
        top: 69%;
    }
    .blood {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:9%;
        height: 8%;
        left: 24%;
        top: 78%;
    }
    .expiry {
        font-size: 25px;
        color: black !important;
        font-weight: bold;
        text-align: left;
        width:25%;
        height: 8%;
        left: 22%;
        top: 88%;
    }
    .staffno {
        font-size: 25px;
        color: white !important;
        font-weight: bold;
        text-align: center;
        width:28%;
        height: 8.5%;
        left: 71%;
        top: 90%;
    }
    .photo {
        width: 28%;
        height: auto;
        position: absolute; /* Change the position to absolute */
        right: 1%; /* Adjust the right property to position the image from the right edge */
        top: 40%;
    }
    @media print {
        rbody * {
            visibility: hidden;
        }
        body *:not(.canvasSaveder):not(.canvasSaveder img):not(.canvasSaveder input) { display: none;)

        .canvasSaveder {
            visibility: visible;
            position: relative;
            color: white !important;
page-break-after: always !important;
        }

        /* Show the image and input fields inside .canvasSaveder */
        .canvasSaveder img,
        .canvasSaveder input {
            visibility: visible;
        }
        .staffno {
            background-color: transparent;
            font-size: 30px;
            color: yellow !important; /* Change color to white */
        }
    }
</style>

<div class="canvasSaveder">
    <img src="images/kacid.jpg" alt="Staff ID Image">
    <!-- Position input fields over the image with percentage-based margins -->
    <input id="charA" type="text" name="aname"
    value="aname" class="resizeME nameA">
    <input id="charE" type="text" name="ename"
    value="ename" class="resizeME nameE">
    <input id="natE" type="text" name="enationality"
    value="cename" class="resizeME nationalityE">
    <input id="natA" type="text" name="anationality"
    value="caname" class="resizeME nationalityA">
    <input id="department" type="text" name="department"
    value="dename" class="resizeME department">
    <input id="title" type="text" name="title"
    value="tename" class="resizeME title">
    <input id="blood" type="text" name="blood"
    value="blename" class="resizeME blood">
    <input id="date" type="text" name="expiry"
    class="resizeME expiry" value="current_dat">
    <input id="staffnos" type="text" name="staffno"
    class="resizeME staffno" value="staffno">
    <span id="photo">
    <img src="images/employees/empPhotos/30546.jpg" class="photo">
    <span>
</div>
    
    <hr style="border: 1px solid black;">
        <button type="button" onclick="printStaffID()">Print Staff ID</button>
    <hr style="border: 1px solid black;">

<script>
    function printStaffID() {
        window.print();
    }
</script>

Related Questions in CSS

Related Questions in PRINT-PREVIEW

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.