0

I have a Visualforce page styled using SLDS elements. I am facing an issue with colors not being visible when we are printing the HTML page. I believe this may be caused due to print styles being applied by the Lightning Design System (I am referring to the CSS media print queries).

Is there any way to print colors by overriding the CSS media print query, or do we need to create our own custom CSS for printing the page?

Here is a sample of the standard data table markup:

<div class="slds-scope">
  <table class="slds-table slds-table_bordered slds-table_cell-buffer">
    <thead>
      <tr class="slds-text-title_caps">
        <th scope="col">
          <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Account Name">Account Name</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Close Date">Close Date</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Stage">Stage</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Confidence">Confidence</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Amount">Amount</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Contact">Contact</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" data-label="Opportunity Name">
          <div class="slds-truncate" title="Cloudhub">
            <a href="javascript:void(0);">Cloudhub</a>
          </div>
        </th>
        <td data-label="Account Name">
          <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
        </td>
        <td style="background-color : green" data-label="Close Date">
          <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
        </td>
        <td data-label="Prospecting">
          <div class="slds-truncate" title="Prospecting">Prospecting</div>
        </td>
        <td data-label="Confidence">
          <div class="slds-truncate" title="20%">20%</div>
        </td>
        <td data-label="Amount">
          <div class="slds-truncate" title="$25k">$25k</div>
        </td>
        <td data-label="Contact">
          <div class="slds-truncate" title="[email protected]">
            <a href="javascript:void(0);">[email protected]</a>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row" data-label="Opportunity Name">
          <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">
            <a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a>
          </div>
        </th>
        <td data-label="Account Name">
          <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
        </td>
        <td data-label="Close Date">
          <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
        </td>
        <td data-label="Prospecting">
          <div class="slds-truncate" title="Prospecting">Prospecting</div>
        </td>
        <td data-label="Confidence">
          <div class="slds-truncate" title="20%">20%</div>
        </td>
        <td data-label="Amount">
          <div class="slds-truncate" title="$25k">$25k</div>
        </td>
        <td data-label="Contact">
          <div class="slds-truncate" title="[email protected]">
            <a href="javascript:void(0);">[email protected]</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

I facing the issue specifically on this markup:

<td style="background-color : green" data-label="Close Date">
   <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>

For this example, I have only one cell colored. Practically, we may have many cells with different colors.

In order to replicate the issue, one can click Ctrl + p to open the print preview dialog.

4
  • Can you post an example of your code that isn't showing colors properly? May 31, 2017 at 11:56
  • I am using the standard data table markup from the lightning design documentation. I have added the markup.
    – anmrk
    May 31, 2017 at 12:23
  • Did I miss it? I don't see any color CSS or classes that would even show color but on mobile so. Can you outline the lines u have issue with and a screenshot as well
    – Eric
    May 31, 2017 at 12:56
  • Name space your datatable CSS Jun 10, 2017 at 2:00

1 Answer 1

1

On Visualforce pages, if you use the apex:slds component, the resulting Lightning Design System (SLDS) stylesheet applies the following styles to the document via the @media print query:

@media print {
    .slds-scope *,
    .slds-scope *:before,
    .slds-scope *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

As you can see, the background property is set to transparent when printing and uses the !important rule to override any other declarations.

You can override this default styling by incorporating the !important rule in your own custom CSS (place this after the apex:slds component on your Visualforce page to ensure specificity is calculated according to your wishes):

@media print {
    .slds-scope td {
        background-color: green !important;
    }
}

Lastly, make sure you enable Background Graphics in your browser's printer settings, as many of the print settings are outside of the realm of CSS and at the browser level:

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .