Search code examples
javascripthtmlcssmedia-queries

Css media print show additional data, how to avoid them not come in print

I am working On a laravel project and used CSS media print in somewhere, It is good but it shows additional data in Chrome Print Dialog like the below image as I marked them, So I don't want them to display when I print it, how to avoid it? enter image description here

this the HTML code:

<div class="row">
   <h3 style="margin-right: 14px;">مشخصات شاگرد</h3>
   <div class="col-md-4" style="padding-left: 0px;" id="student_info">
      <div class="list-group">
         <a href="" class="list-group-item disabled  student_details">نام</a>
         <a href="" class="list-group-item student_details">تخلص</a>
         <a href="" class="list-group-item disabled student_details">نام پدر</a>
         <a href="" class="list-group-item student_details">جنسیت</a>
         <a href="" class="list-group-item disabled student_details">سن</a>
         <a href="" class="list-group-item student_details">تلیفون</a>
         <a href="" class="list-group-item student_details disabled">آدرس</a>
         <a href="" class="list-group-item student_details">ایمیل</a>
         <a href="" class="list-group-item student_details disabled">حالت مدنی</a>
         <a href="" class="list-group-item student_details">نمبر تذکره</a>
      </div>
   </div>
   <div class="col-md-8" style="padding-right: 0px;" id="student_info_date">
      <div class="list-group">
         <a href="" class="list-group-item student_details disabled"> {{ $student->first_name }} </a>
         <a href="" class="list-group-item student_details">{{ $student->last_name }}</a>
         <a href="" class="list-group-item student_details disabled"> {{ $student->father_name }} </a>
         <a href="" class="list-group-item student_details">{{ $student->gender }}</a>
         <a href="" class="list-group-item student_details disabled"> {{ $student->age }} </a>
         <a href="" class="list-group-item student_details">{{ $student->phone }}</a>
         <a href="" class="list-group-item student_details disabled"> {{ $student->address }} </a>
         <a href="" class="list-group-item student_details"> {{ $student->email_address }} </a>
         <a href="" class="list-group-item student_details disabled"> {{ $student->marital_status }} </a>
         <a href="" class="list-group-item student_details"> {{ $student->ssn_number }} </a>
      </div>
   </div>
</div>

this my script code:

<script>
   $(document).ready(function () {
      $('#print').click(function () {
          window.print()
      })
   })
</script>

this is style for print:

<style>
    @media print  {
        body * {
            visibility: visible !important;
        }
        @page  {

            margin: 0;
        }
        #print,.fixed-navbar{
            display: none;
        }
        #student{
            margin-top: -70px;
        }
        #student_info
        {
            width: 15%;
        }
        #student_info_date,
        #student_info_date{
            margin-right:15% ;
            margin-top: -535px;
            width: 30%;
        }
        #student_family{
            margin-right: 41%;
            margin-top: -797px;
        }
        #student_family_info{
            width: 25%;
        }
        #student_family_info_data{
            width: 45%;
            margin-right: 25%;
            margin-top: -546px;


        }

    }
    a.student_details{
        max-height:100px;
        min-height: 50px;
    }
    a.student_class_details{
        min-height: 90px;
    }
    a.student_class_score_details{
        min-height: 90px;
        padding:28%;
    }

</style>
Solution

  • use instead of every <a> tags from <span> tag.

    <div class="row">
   <h3 style="margin-right: 14px;">مشخصات شاگرد</h3>
   <div class="col-md-4" style="padding-left: 0px;" id="student_info">
      <div class="list-group">
         <span href="" class="list-group-item disabled  student_details">نام</span>
         <span href="" class="list-group-item student_details">تخلص</span>
         <span href="" class="list-group-item disabled student_details">نام پدر</span>
         <span href="" class="list-group-item student_details">جنسیت</span>
         <span href="" class="list-group-item disabled student_details">سن</span>
         <span href="" class="list-group-item student_details">تلیفون</span>
         <span href="" class="list-group-item student_details disabled">آدرس</span>
         <span href="" class="list-group-item student_details">ایمیل</span>
         <span href="" class="list-group-item student_details disabled">حالت مدنی</span>
         <span href="" class="list-group-item student_details">نمبر تذکره</span>
      </div>
   </div>
   <div class="col-md-8" style="padding-right: 0px;" id="student_info_date">
      <div class="list-group">
         <span href="" class="list-group-item student_details disabled"> {{ $student->first_name }} </span>
         <span href="" class="list-group-item student_details">{{ $student->last_name }}</span>
         <span href="" class="list-group-item student_details disabled"> {{ $student->father_name }} </span>
         <span href="" class="list-group-item student_details">{{ $student->gender }}</span>
         <span href="" class="list-group-item student_details disabled"> {{ $student->age }} </span>
         <span href="" class="list-group-item student_details">{{ $student->phone }}</span>
         <span href="" class="list-group-item student_details disabled"> {{ $student->address }} </span>
         <span href="" class="list-group-item student_details"> {{ $student->email_address }} </span>
         <span href="" class="list-group-item student_details disabled"> {{ $student->marital_status }} </span>
         <span href="" class="list-group-item student_details"> {{ $student->ssn_number }} </span>
      </div>
   </div>
</div>