tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Classic向けVFページでLightning Design System適用時にスタイルを整える方法

Classic向けVisualforceページを開発したときに見た目で気になる部分がでてくると思います。周りの余白部分です。
f:id:tyoshikawa1106:20170419233053p:plain


Salesforce標準スタイルが適用されるためなので仕方がない部分ですが、SLDSを適用するような画面ではできれば余白を無くしたくなると思います。


そんなときは下記スタイルを読み込ませれば回避できそうです。

<style>
    .noSidebarCell, .sidebarCell .fixed {
        padding: 0 !important;
    }
</style>


これで周りの余白を無くしスッキリしたデザインにすることができました。
f:id:tyoshikawa1106:20170419233609p:plain

サンプルコード

<apex:page showHeader="true" sidebar="false" id="page">
    <!-- Lightning Design System -->
    <apex:slds />
    <style>
        .noSidebarCell, .sidebarCell .fixed {
            padding: 0 !important;
        }
    </style>
    <!-- App -->
    <div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="vf-page">
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media slds-no-space slds-grow">
                        <div class="slds-media__figure">
                            <svg class="slds-icon slds-icon-standard-user" aria-hidden="true">
                                <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-title--caps slds-line-height--reset">Record Type</p>
                            <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Record Title</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</apex:page>