function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Daniel GrabowskiDaniel Grabowski 

SLDS Docked Composer Issue

I'm building a visualforce page using SLDS0121, and the Docked Composer doesn't seem to show up right.  I directly copy/pasted the Base version, it just shows up inside of the page (at the bottom) without any formatting (header color, container box, etc).  According to the docs it is stable, and I tried putting the code just about everywhere I can think of ( inside <div class="slds"> and/or <div class="myapp">, etc.) .  

Anyone else having trouble with this?

https://www.lightningdesignsystem.com/components/docked-composer/
Best Answer chosen by Daniel Grabowski
Daniel GrabowskiDaniel Grabowski
I found the solution.  I was using an older version of SLDS.  I updated to v2.0.2

Also, during the SLDS Trailhead tutorial, I was told to use: 
<apex:stylesheet value="{!URLFOR($Resource.SLDS_STATIC_RESOURCE, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

Looking in the actual downloaded v2.0.2 .zip, though, i should have been using this filename (removed the '-vf' at the end):
<apex:stylesheet value="{!URLFOR($Resource.SLDS0202, 'assets/styles/salesforce-lightning-design-system\.css')}" />

Works great now!

All Answers

Vivek DVivek D
Hi Daniel,

​SLDS components are fully CSS based components they just don’t work like it is expected or displayed. You need to use either jQuery or AngularJS to render these components.
For example, for this component make it hidden using hide() method of jQuery or ng-show/ng-hide from angularjs. On action when you want to show it just use show() or ng-show/ng-hide.
You can use any JavaScript framework. I mentioned jQuery and AngularJS because I used them with SLDS and they both work fine.
 
 
Daniel GrabowskiDaniel Grabowski
I'm aware that you need to use jQuery to disply the component.  I'm saying that no matter where I put the component, it doesn't display correctly (in the way it does in Lightning Experience, for example).  The components inside the composer either display at the bottom of the page outside of a composer, or they don't show up at all.
Daniel GrabowskiDaniel Grabowski
I found the solution.  I was using an older version of SLDS.  I updated to v2.0.2

Also, during the SLDS Trailhead tutorial, I was told to use: 
<apex:stylesheet value="{!URLFOR($Resource.SLDS_STATIC_RESOURCE, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

Looking in the actual downloaded v2.0.2 .zip, though, i should have been using this filename (removed the '-vf' at the end):
<apex:stylesheet value="{!URLFOR($Resource.SLDS0202, 'assets/styles/salesforce-lightning-design-system\.css')}" />

Works great now!
This was selected as the best answer