salesforceapex-codevisualforce

How to include/merge two visual force pages and have second page styling persist?


I am currently trying to create some pdfs for a Meta Human salesforce app and cannot figure out how to merge two visual force pages into one correctly. I am using the apex:include tag to merge the two visual force pages; however, the styles of the second page are not being applied when the two pages are merged together. If I preview the second page that styles are applied correctly.

How would I correctly preserve the styles in the second visual force page after the two are merged together?

Visual Force Page 1

    <apex:page renderAs="pdf" id="HeroPDF" standardController="Meta_Human__c" extensions="attachPDF,Test_Two_Extentions" action="{!loadData}" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
    <html>
    <head>
        <style type="text/CSS">
            body {
                font-family: "Metropolis", sans-serif;
                font-size: 14px;
            }
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
              border: 1px solid #000;
              padding: 8px;
              width: 50%;
            }
            .headerRow {
                background-color: #E8E8E8;
                color: #b25a00;
            }
            .watermark {
                position: fixed;
                top: 0.5;
                right: 0.5;
                background-image: url("{!$Resource.draft}");
                width: 715px;
                height: 950px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <!-- <div class="watermark"></div> -->
        <div style="margin-bottom:20px;">
            <center><apex:image url="{!$Resource[heroResource]}" width="150" height="88"/></center>
        </div>
           <table>
            <tbody>
                <tr>
                    <td class="headerRow" colspan="10"><strong>Hero Information</strong></td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <strong>Hero Name</strong>
                        </div>
                        {!Meta_Human__c.Name}
                    </td>
                    <td>
                        <div>
                            <strong>Real Name</strong>
                        </div>
                        {!Meta_Human__c.Real_Name__c}
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <strong>Attributes</strong>
                        </div>
                        {!Meta_Human__c.Attributes__c}
                    </td>
                    <td>
                        <div>
                            <strong>Gender</strong>
                        </div>
                        {!Meta_Human__c.Gender__c}
                    </td>
                </tr>
                <tr>
                    <td class="headerRow" colspan="10"><strong>Hero Affiliations</strong></td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <strong>Meta Human Team</strong>
                        </div>
                        {!Meta_Human__c.Meta_Human_Team__r.Name}
                    </td>
                    <td>
                        <div>
                            <strong>Current Sidekick</strong>
                        </div>
                        {!Meta_Human__c.Current_Sidekick__r.Name}
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="margin-top:24px;">
            <apex:include pageName="HeroPDF2" rendered="{!NOT(ISBLANK(Meta_Human__c.Meta_Human_Team__r.Name))}"/>
        </div>
    </body>
    </html>
</apex:page>

Visual Force Page 2

<apex:page renderAs="pdf" id="HeroPDF2" standardController="Meta_Human__c" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
    <head>
        <style type="text/CSS">
            body {
                font-family: "Metropolis", sans-serif;
                font-size: 14px;
            }
            table {
                margin-top: 24px;
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
              border: 1px solid #000;
              padding: 8px;
              width: 50%;
            }
            .header-row {
                background-color: #E8E8E8;
                color: #b25a00;
            }            
        </style>
</head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td class="header-row"><strong>Hero Team Name</strong></td>
                </tr>
                <tr>
                    <td>
                        {!Meta_Human__c.Meta_Human_Team__r.Name}
                    </td>
                </tr>
                <tr>
                    <td class="header-row"><strong>Total Number of Members</strong></td>
                </tr>
                <tr>
                    <td>
                        {!Meta_Human__c.Meta_Human_Team__r.Total_Count_Of_Members__c}
                    </td>
                </tr>
                <tr>
                    <td class="header-row"><strong>Team Problems</strong></td>
                </tr>
                <tr>
                    <td>
                        {!Meta_Human__c.Meta_Human_Team__r.Team_Problems__c}
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
</apex:page>

Screenshot of the second visual force page styling not applying (Hero Team Name Table)

enter image description here


Solution

  • Thanks to @eyescream comment. Was able to resolve styles not applying to the second visualforce page by using ID selector. ID Selectors only wasn't the solution but a good starting point to the solution.

    What ended up working was assigning the body of both visualforce pages a unique ID and prefixing the CSS with the corresponding unique ID. If you just prefix the CSS in the second page alone will NOT apply the styles when the two pages are merged. You need to move the CSS from the second visualforce page into the first visualforce page. The moving of the second visualforce page's CSS into the first visualforce page is the magic.

    In the code below, I choose to copy the second visualforce page's CSS into the first visualforce page, that way when previewing the second visualforce page the styles are still applied.

    Updated Visualforce Page 1

    <apex:page renderAs="pdf" id="HeroPDF" standardController="Meta_Human__c" extensions="attachPDF,Test_Two_Extentions" action="{!loadData}" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
        <html>
            <head>
                <style type="text/CSS">
                    body {
                        font-family: "Metropolis", sans-serif;
                        font-size: 14px;
                    }
                    #hero1 table {
                        border-collapse: collapse;
                        width: 100%;
                    }
                    #hero1 th, td {
                        border: 1px solid #000;
                        padding: 8px;
                        width: 50%;
                    }
                    #hero1 .headerRow {
                        background-color: #E8E8E8;
                        color: #b25a00;
                    }
                    #hero2 table {
                        margin-top: 24px;
                        border-collapse: collapse;
                        width: 100%;
                    }
                    #hero2 th, td {
                        border: 1px solid #000;
                        padding: 8px;
                        width: 50%;
                    }
                    #hero2 .header-row {
                        background-color: #E8E8E8;
                        color: #b25a00;
                    }
                    .watermark {
                        position: fixed;
                        top: 0.5;
                        right: 0.5;
                        background-image: url("{!$Resource.draft}");
                        width: 715px;
                        height: 950px;
                        z-index: -1;
                    }
                </style>
            </head>
            <body id="hero1">
                <!-- <div class="watermark"></div> -->
                <div style="margin-bottom:20px;">
                    <center><apex:image url="{!$Resource[heroResource]}" width="150" height="88"/></center>
                </div>
                <table>
                    <tbody>
                        <tr>
                            <td class="headerRow" colspan="10"><strong>Hero Information</strong></td>
                        </tr>
                        <tr>
                            <td>
                                <div>
                                    <strong>Hero Name</strong>
                                </div>
                                {!Meta_Human__c.Name}
                            </td>
                            <td>
                                <div>
                                    <strong>Real Name</strong>
                                </div>
                                {!Meta_Human__c.Real_Name__c}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div>
                                    <strong>Attributes</strong>
                                </div>
                                {!Meta_Human__c.Attributes__c}
                            </td>
                            <td>
                                <div>
                                    <strong>Gender</strong>
                                </div>
                                {!Meta_Human__c.Gender__c}
                            </td>
                        </tr>
                        <tr>
                            <td class="headerRow" colspan="10"><strong>Hero Affiliations</strong></td>
                        </tr>
                        <tr>
                            <td>
                                <div>
                                    <strong>Meta Human Team</strong>
                                </div>
                                {!Meta_Human__c.Meta_Human_Team__r.Name}
                            </td>
                            <td>
                                <div>
                                    <strong>Current Sidekick</strong>
                                </div>
                                {!Meta_Human__c.Current_Sidekick__r.Name}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <apex:include pageName="HeroPDF2" rendered="{!NOT(ISBLANK(Meta_Human__c.Meta_Human_Team__r.Name))}"/>
            </body>
        </html>
    </apex:page>
    

    Updated Visualforce Page 2

    <apex:page renderAs="pdf" id="HeroPDF2" standardController="Meta_Human__c" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
        <html>
            <head>
                <style type="text/CSS">
                    body {
                        font-family: "Metropolis", sans-serif;
                        font-size: 14px;
                    }
                    #hero2 table {
                        margin-top: 24px;
                        border-collapse: collapse;
                        width: 100%;
                    }
                    #hero2 th, td {
                        border: 1px solid #000;
                        padding: 8px;
                        width: 50%;
                    }
                    #hero2 .header-row {
                        background-color: #E8E8E8;
                        color: #b25a00;
                    }
                </style>
            </head>
            <body id="hero2">
                <table>
                    <tbody>
                        <tr>
                            <td class="header-row"><strong>Hero Team Name</strong></td>
                        </tr>
                        <tr>
                            <td>
                                {!Meta_Human__c.Meta_Human_Team__r.Name}
                            </td>
                        </tr>
                        <tr>
                            <td class="header-row"><strong>Total Number of Members</strong></td>
                        </tr>
                        <tr>
                            <td>
                                {!Meta_Human__c.Meta_Human_Team__r.Total_Count_Of_Members__c}
                            </td>
                        </tr>
                        <tr>
                            <td class="header-row"><strong>Team Problems</strong></td>
                        </tr>
                        <tr>
                            <td>
                                {!Meta_Human__c.Meta_Human_Team__r.Team_Problems__c}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </body>
        </html>
    </apex:page>
    

    Updated Screenshot of second visualforce page applying (Hero Team Name Table) enter image description here