Страница не корректно отображается на распечатки в А4 формате

01 апреля 2021, 11:40

Resourse:

<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Notification of Treatment Stimulant Medicines</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printstyles.css" media="print" />
</head>
    <body>
    <div class="container">
        <form class="form" action="">
            <div class="form__border-title margin-b">
               <strong> 1. Lorem ipsum.</strong>
            </div>
            <div class="form__wrap margin-b display-f">
                <div class="form__checkbox">
                    <p class="check">
                        <span class="line line-1"></span>
                        <span class="line line-2"></span>
                    </p>
                    <p>New</p>
                </div>
                <div class="form__checkbox">
                    <p class="check">
                        <span class="line line-1"></span>
                        <span class="line line-2"></span>
                    </p>
                    <p>Lorem ipsum dolor sit.</p>
                </div>
                <div class="form__checkbox">
                    <p class="check">
                        <span class="line line-1"></span>
                        <span class="line line-2"></span>
                    </p>
                    <p>Lorem ipsum dolor sit.</p>
                </div>
            </div>
            <div class="form__wrap margin-b">
                <div class="form__input">
                <strong class="text">Reason for terminations:</strong>
                <input type="text" value="" >
            </div>
            </div>
            <div class="form__border-title margin-b">
                <strong> 2. Lorem ipsum.</strong>
            </div>
            <div class="form__wrap display-f margin-b">
                <div class="form__input form__input_firstname">
                    <strong class="text">First name:</strong>
                    <input type="text" value="" >
                </div>
                <div class="form__input form__input_surname">
                    <strong class="text">Surname:</strong>
                    <input type="text" value="" >
                </div>
                <div class="form__input form__input_dob">
                    <strong class="text">DOB:</strong>
                    <input type="text" value="" >
                </div>
            </div>
            <div class="form__wrap display-f  margin-b form__wrap_overflow">
                <div class="form__input form__input_address">
                    <strong class="text">Address:</strong>
                    <input type="text" value="" >
                </div>
                <div class="form__input form__input_suburb">
                    <strong class="text">Suburb:</strong>
                    <input type="text" value="" >
                </div>
                <div class="form__input form__input_postcode">
                    <strong class="text">Postcode:</strong>
                    <input type="text" value="" >
                </div>
            </div>
            <div class="form__wrap margin-b display-f  ">
                <div class="form__input form__input_aliases">
                    <strong class="text">Aliases:</strong>
                    <input type="text" value="" >
                </div>
                <div class="form__input form__input_gender">
                    <strong class="text text_gender">Gender:</strong>
                    <div class="form__checkbox form__checkbox_gender">
                        <p class="check">
                            <span class="line line-1"></span>
                            <span class="line line-2"></span>
                        </p>
                        <p>Male</p>
                    </div>
                    <div class="form__checkbox form__checkbox_gender">

                        <p class="check">
                            <span class="line line-1"></span>
                            <span class="line line-2"></span>
                        </p>
                        <p>Female</p>
                    </div>
                    <div class="form__checkbox form__checkbox_gender">
                        <p class="check">
                            <span class="line line-1"></span>
                            <span class="line line-2"></span>
                        </p>
                        <p>Unspecified</p>
                    </div>
                </div>
            </div>

        </form>
    </div>
    </body>
    <script>
       let check =  document.querySelectorAll('.form__checkbox .check');

       for (let i = 0; check.length > i; i++){
           check[i].addEventListener('click', function () {
               check[i].classList.toggle('active');
           })
       }
    </script>
</html>

Link to codopen

А это результат после конвертации в PDF

Вы можете заметить, что фон чекбоксов так же не отображается

А в HTML - все норм!

Summary:

Сама страница выглядит корректно, но как только пытаюсь сделать распечатку и конвертировать в PDF файл (Ctrl+P), она не видит отмеченные галочки и плюс фон чекбоксов теряется

Question: Как исправить этот баг??

Answer 1

Попробовал сохранить через браузер chrome, чтобы отобразились галочки нужно отметить в настройках background graphics.