[SalesForce] Visualforce Page renderAs pdf styling does not apply

<!-- Begin inline CSS -->
<style type="text/css" >
.NMA-mobile-logo{
    width:57%;
}

.NMA-other-logo{
    width: 25%;
}   
.headerWrap {
    border-radius: 15px; 
    background: floralwhite;
    margin:1%; 
    padding: 1%;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
.inline-flexDiv {
    display: inline-flex; 
    width: 100%;
}
.memberDetail {
    padding: 1%; 
    width: 50%; 
    border-radius: 10px; 
    padding: 1%; 
    background: white;
}
.memberDetail2 {
    border-radius: 15px; 
    background: floralwhite; 
    margin:1%; 
    padding: 1%;
}
.detailContent {
    padding: 1%;
}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
</head>     

<body>
<div id="pg1" class="headerWrap">
    <div class="inline-flexDiv">
        <img src="{!$Resource.MemberCommunityLogos+'/Logos/NSWNMA-logo-no_bg.png'}" />
        <div class="">
            <span>CompanyName</span><br/>
            <span>50 O'Dea Ave WATERLOO NSW 2017</span><br/>
            <span>Ph:</span>
            <span>1895 367 962</span>
            <span>Fax:</span>
            <span>02 5789 1414</span><br/>
        </div>
    </div>
    <br/>
    <div class="memberDetail">
        <span>{!member.Name}</span><br/>
        <span>50</span><br/>
        <span>o'Dea</span><br/>
        <span>WATERLOO NSW 2017</span>
    </div>
</div>
<div class="memberDetail2">
    <span class="detailContent">MEMBER NO.:{!member.Member_Number__c}</span><br/>
    <span class="detailContent">ESTABLISHMENT: TEST Estab</span><br/>
    <span class="detailContent">TOTAL AMOUNT: {!totalAmount}</span><br/>
</div>  
<hr/>

<div>FISCAL YEAR PAYMENT HISTORY</div>
<table>
  <tr>
    <th>Date</th>
    <th>Amount</th>
    <th>Receipt No</th>
  </tr>   
  <apex:repeat value="{!member.Transactions__r}" var="trans">           
        <tr>
            <td><apex:outputText value="{0, date,  dd/MM/yyyy}">
                <apex:param value="{!trans.createddate}" /></apex:outputText>
            </td>
            <td>{!trans.Transaction_Reference__c}</td>
            <td>${!trans.Amount__c}</td>
          </tr>
    </apex:repeat>
    </table>            
</body>

Best Answer

CSS transforms are not supported in PDF mode. Also, anything that starts with "-moz", "-ms", "-o", or "-webkit" are not supported. You'll have to find a CSS1- or CSS2-level support design that meets your needs, or use an alternative rendering engine, such as JSPDF or another alternative.

Related Topic