Questions tagged [slds]

Salesforce Lightning Design System (SLDS) is a collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem.

Filter by
Sorted by
Tagged with
14
votes
5answers
9k views

Lightning Design System is overridden by styles from app.css

Some of the CSS styles from Lightning Design System is overridden by styles from app.css which is loaded as a part of Salesforce1 app. We are facing some issues with this. Description of Issues: In ...
14
votes
4answers
5k views

apex:slds vs lightningstylesheet option

What is the benefit of using <apex:slds> vs specifying the lightningstylesheet attribute on your <apex:page>? These links talks about both but I don't understand the difference apex:slds ...
13
votes
2answers
3k views

Unknown component apex:slds

When I am trying to use Salesforce Lightning Design System in my vf page, I get error - Unknown component apex:slds while including <apex:slds /> on my vf page. Unrelated - I have also tried ...
12
votes
3answers
9k views

How to convert a Visualforce apex:pageMessages to be lightning style

During my working on converting existing pages to be lightning experience style (as known as slds style). One of the challenges I have faced is to convert <apex:pageMessages/> . Usually the ...
12
votes
1answer
4k views

How do you build inline edit behavior when coding a lightning component?

How do you do this in code? With Visualforce, I had used apex:inlineEditSupport and I was wondering if there was the equivalent when building with lightning. Are there some out of the box components ...
11
votes
2answers
13k views

SLDS - How to position a spinner on a Lightning component

In my custom Lightning component I can't work out how to apply the proper SLDS classes to my component. <aura:component controller="..."> <div aura:id="uploadCard" class="slds-card__header"...
11
votes
1answer
1k views

SLDS - Motion - CSS / Implementation listed anywhere?

So I have reviewed the SLDS guide on motion and it is great and all but I could not find anywhere in the documentation the actual CSS to implement the examples they give They show all these Named ...
10
votes
1answer
5k views

AuraClientService.postProcess: error in processing [RangeError: Maximum call stack size exceeded] - Client Side Action

I have a lightning component that is using ui:inputSelect. The component code: <div class="slds-form-element__control"> <ui:inputSelect class="slds-select" aura:...
10
votes
2answers
563 views

Lightning and Jquery error: Uncaught Error: Access denied for insecure view

I'm just starting out in Lightning (Summer 16 sandbox) and I'm trying to use jQuery, but getting the error: Uncaught Error: Access denied for insecure view in aura_prod.js:1:27. I'm testing in a very ...
9
votes
3answers
20k views

Lightning : Icon color is not changing using the fill CSS

According to the documentation (https://www.lightningdesignsystem.com/components/icons/ ) we can change the icon color by suing the CSS. I am not able to do it. It always overrides with the Salesforce ...
8
votes
3answers
7k views

Summer 18 - Lightning input variant label-hidden hides the label but occupies the space for label

I am trying to include lightning:select component in a table row. But I don't want to show the label for select input. I am using variant="label-hidden", which hides the label, but the space for the ...
8
votes
1answer
2k views

How to use slds illustration?

I looked into this to use illustration in my component. https://lightningdesignsystem.com/components/illustration/ As we can't use svg tag in lightning component, so is there any way by which we can ...
8
votes
1answer
1k views

Dynamically Render Toast Message With Icon?

I wrote a dynamic component to build toast messages based on ApexPages.Message in my answer here, but one aspect of it has been bothering me ever since, and I'm trying to fix it. When the toast is ...
7
votes
1answer
10k views

Lightning client side sorting

component.set("v.Accounts", Accounts); has the accounts that I need. <th scope="col"> <div class="slds-truncate" title="Opportunity Name" onclick"{!sortbyOpportunityNAme}">...
7
votes
2answers
26k views

SLDS table with fixed header

I'm implementing SLDS table in lightning component where you load more data on vertical scroll and it would be nice to have headers fixed. The code that I'm using is pretty much as in the slds docs: &...
7
votes
3answers
5k views

SLDS - Transition Slow - How to fade in

I have tried everything and I cannot get an element to transition slowly using SLDS. The SLDS says: To slowly transition an element from hiding and showing, use the slds-transition-hide and slds-...
7
votes
1answer
5k views

Lightning (SLDS) styling for calendar

I have designed a VF page with SLDS, which has a calendar field, how could I replace the current date proportion of the calendar field with some image/icon using SLDS? or any other solutions? Please ...
7
votes
2answers
1k views

Lookup Field Dual Keyboard Focus (Answered with working Autocomplete lookup component and JS example for VF/SLDS)

The SLDS docs describe: Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to ...
7
votes
1answer
358 views

Unstyled Flows in Lightning Out

I have a static site, hosted in a AWS S3 bucket. The static site uses Lightning Out to load a component that contains a flow. I have included the SLDS stylesheet in the static site, and have ...
6
votes
2answers
12k views

One column/two column form responsive layout using SLDS that preserves field ordering?

When I Google about responsive design, I find many examples where two areas that display side by side: AAA BBB AAA BBB AAA BBB display one after the other when the screen width is reduced: AAA AAA ...
6
votes
1answer
5k views

SLDS and inputField checkbox

So, the SLDS says that a checkbox must be done like this: <div class="slds-form-element"> <label class="slds-checkbox" for="checkboxSample1"> <input name="checkbox" type="...
6
votes
2answers
541 views

Will Lightning Base Components fully replace SLDS?

I've noticed that certain Lightning UI features have equivalents across Base/UI Components and SLDS, such as modals. But, some don't. I haven't seen a base-component equivalent of Checkbox Buttons, ...
6
votes
2answers
437 views

Any 3rd party SLDS Stencil CSS available?

To re-assure users who are waiting for output, the Salesforce Lightning Design system Loading documentation recommends using spinners (included in SLDS - see Spinners) and also Stencils (abstract ...
6
votes
2answers
10k views

readonly property of lightning:input not working

I am using lightning:input of different types. Using readonly=true in input of type text is working but does not work for checkbox or for lightning:select. Anyone got any clue for this?
6
votes
1answer
3k views

Difference between lightning:button & ui:button

I was going through the SLDS document and couldn't understand the difference between various UI components provided by SLDS vs Lightning components. For instance, <ui:button> & <...
6
votes
1answer
2k views

Lightning: How to open a newly-added accordion section?

Assume the following pseudo-markup: <component> <attribute recordList/> <button label="Add" onclick="{!c.addRec}"/> <accordion> <iterate over recordList ...
6
votes
3answers
645 views

Summer 18: SVG blocked in Lightning Components

The old approach of using a helper component to display SVG in Lightning now appears to be blocked in Summer 18. What is a bit alarming, though, is that even components marked with API version 40-42 ...
6
votes
1answer
271 views

slds-order--# only works up to 12 items?

I have a section in my app where I'm allowing the user to turn on and off various "tiles" of data, which are displayed vertically. I always want them displayed in a certain order, so I use the slds-...
6
votes
3answers
5k views

How do I create an Alert in Lightning?

I'm looking for the best practice to fire a simple Confirm, Prompt or Alert from a component using the LDS (and use the response). It feels like it should be simple question but I can't find an ...
6
votes
1answer
414 views

Anybody using SLDS Design Tokens in conjunction with React?

The Salesforce Lightning Design System offers a set of Design Tokens that are described as the "visual design atoms of the design system". The Lightning Component framework easily allows you to pull ...
6
votes
1answer
129 views

Locale Supported Format For Visualforce Input Field

I've been rewriting a Visualforce page to use SLDS styling. Part of this requires rewriting dynamics DateTIme fields to SLDS Date time picker. This therefore means writing the Date part of the ...
5
votes
2answers
2k views

Word Break - Lightning

I want the string to be transfered to the next line in lightning. In salesforce classic I would just apply to the element style="word-break: break-all". In lightning there's a special tag for that. ...
5
votes
3answers
2k views

What Scoping Class Will <apex:slds> Use?

In reading through the release notes I was excited to discover the introduction of a new <apex:slds> tag. That should help lower the barriers to entry! However, the release notes do not specify ...
5
votes
1answer
141 views

Auto scale lightning component in VF Page

I am trying to POC a very simple lightning component within a VF page, which is then displayed on a Force.com Sites. I am able to do this, but I need the component to "auto scale" to the correct size,...
5
votes
4answers
5k views

How to set autocomplete=“off” in lightning form

The Problem I am trying to set the HTML attribute auto-complete="off" on an input element with the class slds-input. For some reason the template always converts this to autocomplete="true" in ...
5
votes
5answers
9k views

How to Close SLDS Dropdown Menu when clicked outside in Lightning Component?

I'm familiar with the stuff that SLDS is CSS framework, and know that we need to incorporate our own JS to implement additional logic, which I can easily do in VF pages with jQuery etc, but I'm ...
5
votes
2answers
3k views

Aura:If vs Styling to show/hide content

Are there any benefits/negatives from either of the approaches below to conditionally show content in a Lightning component? <aura:if isTrue="{! v.myBoolean }"> The Content </aura:id> ...
5
votes
1answer
2k views

lightning:input checkbox label with url

I have been tying to include "url/hyperlink" within a checkbox "label" using lightning input, but to no avail. Given is what I have tried and with the results, I want "Terms and Service" part of the ...
5
votes
1answer
27 views

Can I use Prompts from SLDS in my managed app?

While reading through the docs about Promts, I noticed this guideline: Note: If you’re a partner building an app that appears within Salesforce, don’t use this component. Does it imply that I ...
5
votes
1answer
280 views

Keep Themes & Branding from overriding SLDS styles

We have a customized version of the path structure in our app that is showing the current status of a process object. To leverage as much as possible of the SLDS we reused as many classes from ...
5
votes
1answer
4k views

VisualForce page with SLDS: apex:inputField lookup button way too big

I have the following piece of code: <div class="slds-p-horizontal--small slds-size--5-of-12"> <label class="slds-form-element__label" for="select-01">Campaign</label> <...
5
votes
1answer
422 views

Any way to introduce a separator into lightning:datatable row actions?

In SLDS there is a slds-has-divider_top-space style that allows a separator to be displayed between groups of actions: and this class can be specified in e.g. a lightning:menuItem. Is there any way ...
5
votes
1answer
480 views

Differentiate iPad Pro and iPad Air using slds | Lightning Design System

How to differentiate between iPad Pro portrait and the iPad Air/Mini landscape view in Lightning Design System? The device width in the case of iPad Pro portrait is 1024px, which is same as in iPad ...
5
votes
1answer
419 views

Using SLDS icons in inline VisualForce page within managed package fails due to 302 redirect

I am currently creating a managed package and am running into a problem which I think others will or have also faced while deploying a package using lightning components which are optionally wrapped ...
4
votes
3answers
361 views

Difference in using Lightning Component <lightning:badge/> and Normal DOM with slds <span class=“slds-badge”></span>? Which is Better and Why?

Example: <lightning:badge label="Lightning Component"/> <span class="slds-badge">DOM Tag</span> Which is better? Which is faster? And why should I use Lightning component if I am ...
4
votes
1answer
977 views

How to add a functionality to stop copy paste on an input field in lightning?

I'm making a form that includes two fields, Email and Re-Enter Email. I don't want the user to copy and paste the email id in the second field. I have to prevent right clicks on the re-enter field and/...
4
votes
2answers
1k views

apex:slds vs apex:includelightning vs apex:page lightningStylesheets=“true”

apex:slds vs apex:includelightning vs apex:page lightningStylesheets="true". Which one do we need to use to enable lightning experience in existing visualforce pages?
4
votes
2answers
6k views

Lightning Component Styling on UI Components

I'm wondering why my ui:button components aren't rendering correctly. This is what the button is supposed to look like but when I try to style the ui:button component it looks like this: the ...
4
votes
2answers
4k views

Issue in Lightning desing System modal component

I have developed new Modal using lightning desing system.In standard modal new button pop up appears on whole broweser lightning page. But when I desgined using SLDS it will come up but still ...
4
votes
1answer
3k views

SLDS lightning card margin issue

When lightning cards render, the first one seems to always be missaligned at the top no matter what. (this is obviously fixable with CSS). I used dymamic rendering, standard lightning:Card component ...