'How to remove the webform's title and submission # in PDF?

I am using twig to display all the submitted data of a form in PDF Attachment field. After writing the twig code,

  1. the form's title and the submission ID would not go away and mess up the template, and I do not even have them on twig.

  2. the date and the p tag are not printed properly despite my code works fine in editor

Can anyone tell me why and how to fix the problem?

 <style>
    .wrap {
        text-align: center;
    }

    #signature {
        display: inline-table;
        border-collapse: collapse;
        table-layout: auto;
        border: 1px solid rgba(5, 138, 222, 0.67);
        empty-cells: show;
        margin: 1%;
        table-layout: auto;
    }

    #sign {
        border: 1px solid rgba(5, 138, 222, 0.67);
        padding: 10px;
    }

    th {
        background-color: rgba(143, 220, 242, 0.67);
        border: 1px solid rgba(5, 138, 222, 0.67);
        border-left: 1px solid rgba(5, 138, 222, 0.67);
        border-bottom: 1px solid rgba(5, 138, 222, 0.67);
        color: #000000;
        text-align: center;
        font-weight: bold;
        vertical-align: middle;
        padding: .75em .5em;

    }

    td {
        text-align: right;
        border: 1px solid rgba(5, 138, 222, 0.67);
        vertical-align: middle;
        padding: .75em .5em;
    }

    #item {
        border-collapse: collapse;
        border: 1px solid rgba(5, 138, 222, 0.67);
        empty-cells: show;
        margin: 1%;
        table-layout: auto;
        width: 100%;
    }

    p {
        font-weight: bold;
    }
</style>
<body>

    <h1 style="float: right;">Date: <u>[webform_submission:values:date_]</u></h1>
    <table id="item">
        <tr>
            <th colspan="5">Expense Item</th>
        </tr>
        <tr>
            <th>Service Purchased</th>
            <th>Purpose</th>
            <th>Receipt</th>
            <th>Account Code</th>
            <th>Amount</th>
        </tr>
        {% for item in data.voucher %}
        <tr>
            <td>{{item.date}}</td>
            <td>{{item.purpose}}</td>
            <td><input type="checkbox"></td>
            <td>{{ item.acct_num }}</td>
            <td>{{'$ ' ~ item.amount}}</td>
        </tr>
        {% endfor %}

    </table>
    <br>
    <h3 align="right">Total Petty Cash: <u>[webform_submission:values:petty_cash_voucher_01_total_petty_cash]</u></h3>
    <br>

    <div class="wrap">
        <table id="signature" width="150">
            <tr>
                <th id="sign">Purchased/Received By:</th>
            </tr>
            <tr>
                <td id="sign" height="100"></td>
            </tr>
        </table>


        <table id="signature" width="150">
            <tr>
                <th id="sign">Approved By:</th>
            </tr>
            <tr>
                <td id="sign" height="100"></td>
            </tr>
        </table>

        <table id="signature" width="150">
            <tr id="sign">
                <th id="sign">Acct.Approval:</th>
            </tr>
            <tr>
                <td height="100" id="sign"></td>
            </tr>
        </table>
    </div>
    <div>
        <p>Must be approved per Authorized List.</p>
        <p>Receipts, including detailed receipts, should be attached to form.</p>
    </div>
</body>


Solution 1:[1]

In your site, go to Webform -> configuration -> forms -> entity print -> remove what's in the header

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 edward55