While working on a Laravel project, I implemented CSS media print in one section. Although it works well, the Chrome Print Dialog displays additional data as shown in the image I marked below. I want to prevent this data from showing up when printing. Can anyone advise me on how to avoid this?
This is 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 is my script code:
<script>
$(document).ready(function () {
$('#print').click(function () {
window.print()
})
})
</script>
This is the style for printing:
<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>