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 ...
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 ...
13
votes
3answers
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 ...
12
votes
3answers
8k 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
11k 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
4k 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
537 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
17k 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
1answer
1k 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
9k 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
3answers
5k 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 ...
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
875 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
299 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
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
11k 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
2answers
493 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
360 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
8k 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
564 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
248 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
4k 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
396 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
97 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
22k 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: &...
5
votes
3answers
1k 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
4answers
4k 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
1answer
1k 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
227 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
3k 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
372 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
419 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 ...
4
votes
3answers
303 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
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. ...
4
votes
1answer
754 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
900 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
2k 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 ...
4
votes
2answers
2k 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> ...
4
votes
5answers
8k 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 ...
4
votes
1answer
538 views

Lightning design system for an external application

I am implement an external application that should be embedded into the Visualforce page. The application is based on the HTML and CSS. For the front-end I've choosen a bootstrap. It all works just ...
4
votes
1answer
827 views

Are SLDS icons available natively in LEX?

According to this page on the Lightning Design System, the unmanaged package has been deprecated due to SLDS being available in Salesforce without need for a static resource. However, I'm having ...