+ Start a Discussion
Rowan  ChristmasRowan Christmas 

Lighting Design System not being applied in the Salesforce1 app

I feel like I'm missing some obvious... 

Here is a Lighting test component based on https://www.lightningdesignsystem.com/components/data-tables#responsive-stacked-horizontal
 
<aura:component implements="flexipage:availableForAllPageTypes, force:appHostable">
    <ltng:require styles="/resource/SLDS0101/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
        <thead>
            <tr class="slds-text-heading--label">
                <th class="slds-row-select" scope="col">
                    <label class="slds-checkbox" for="select-all">
                        <input name="checkbox" type="checkbox" id="select-all" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select all</span>
                    </label>
                </th>
                <th class="slds-is-sortable" scope="col">
                    <span class="slds-truncate">Opportunity Name</span>
                    <button class="slds-button slds-button--icon-bare">
                        <span class="slds-assistive-text">Sort</span>
                    </button>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Account Name</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Close Date</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Stage</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Confidence</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Amount</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Contact</span>
                </th>
                <th class="slds-row-action" scope="col">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="slds-hint-parent">
                <td class="slds-row-select">
                    <label class="slds-checkbox" for="select-row1">
                        <input name="select-row1" type="checkbox" id="select-row1" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select row1</span>
                    </label>
                </td>
                <th data-label="opportunity-name" role="row"><a href="#" class="slds-truncate">Acme 25</a></th>
                <td data-label="account"><a href="#" class="slds-truncate">Acme</a></td>
                <td data-label="activity">
                    <span class="slds-truncate">4/14/2015</span>
                </td>
                <td data-label="stage">
                    <span class="slds-truncate">Prospecting</span>
                </td>
                <td data-label="confidence">
                    <span class="slds-truncate">20%</span>
                </td>
                <td data-label="amount">
                    <span class="slds-truncate">$25k</span>
                </td>
                <td data-label="contact">
                    <span class="slds-truncate">--</span>
                </td>
                <td class="slds-row-action">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </td>
            </tr>
            <tr class="slds-hint-parent">
                <td class="slds-row-select">
                    <label class="slds-checkbox" for="select-row2">
                        <input name="select-row2" type="checkbox" id="select-row2" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select row2</span>
                    </label>
                </td>
                <th data-label="opportunity-name" role="row"><a href="#" class="slds-truncate">Rohde Corp 30</a></th>
                <td data-label="account"><a href="#" class="slds-truncate">Rohde Corp</a></td>
                <td data-label="activity">
                    <span class="slds-truncate">6/18/2015</span>
                </td>
                <td data-label="stage">
                    <span class="slds-truncate">Prospecting</span>
                </td>
                <td data-label="confidence">
                    <span class="slds-truncate">40%</span>
                </td>
                <td data-label="amount">
                    <span class="slds-truncate">$30k</span>
                </td>
                <td data-label="contact"><a href="#" class="slds-truncate">achoi@rohdecorp.com</a></td>
                <td class="slds-row-action">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</aura:component>
Create an app like:
 
<aura:application >
<ltng:require styles="/resource/SLDS0101/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <div class="slds" style="margin-top:10px;margin-left:10px;margin-right:10px">
        <c:CSSTest />
    </div>
</aura:application>

... loads up on my desktop browser using "Preview" from the developer console, no problem. All responsive and styled.

However, when I add this using the Lighting App Building to make a new "app" for Salesforce1, it loses the Lightning Design System styles. Any idea what I'm missing and/or doing wrong? Is there an embedded "salesforce-lightning-design-system-ltng.css" in Salesforce1 that I am supposed to reference? Or am I supposed to do something else fancy?

From what I can tell none of the tutorials on Trailhead or elsewhere cover this, so  any advice is most appreciated.

Thanks!
 
Fabien TaillonFabien Taillon
This is because what you're adding in Lightning App Builder is the Component directly, not the App you created for test.
That means that you don't have the required <div class="slds"> wrapper in the page that is displayed in Salesforce1.
Try adding the <div class="slds" wrapper directly into you component and it will be rendered correctly.
Rowan  ChristmasRowan Christmas
Thanks! I had been having the
tag in the aura:application, and overlooked that level of wrapping.