1

Please see follow codes:

<apex:page sidebar="false" standardStylesheets="true" showHeader="true" docType="html-5.0">
<apex:slds />
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <thead>
        <tr class="slds-line-height_reset">
            <th class="" scope="col">
                <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Account Name">Account Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Close Date">Close Date</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Stage">Stage</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Confidence">Confidence</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Amount">Amount</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Contact">Contact</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
                <div class="slds-truncate" title="Cloudhub">
                    <a href="javascript:void(0);" tabindex="-1">Cloudhub</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="jrogers@cloudhub.com">
                    <a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
                </div>
            </td>
        </tr>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
                <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">
                    <a href="javascript:void(0);" tabindex="-1">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="jrogers@cloudhub.com">
                    <a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
                </div>
            </td>
        </tr>
    </tbody>
</table> 

I create a VF page with Lightning Design System, but when this page show in Classic Console all slds style lost. Please take a look picture.

Lost slds style

I don't have any idea for this issue, does anyone know how to fixed this?

Best wishes, Lee

3
  • Can you remove the standard stylesheet tag and add lightningStylesheets tag – manjit5190 Mar 11 '20 at 12:04
  • @manjit5190, try not work. – GhostLee Mar 12 '20 at 0:36
  • Found way to fixed this issue, need add <div class="slds-scope">...</div> to VF page. – GhostLee Mar 12 '20 at 1:24
0

need add ... to VF page. Please take a look follow link: https://www.lightningdesignsystem.com/platforms/visualforce/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.