Questions tagged [lightning-design-system]

Questions related to Lightning CSS Framework called Salesforce Lightning Design System or SLDS for short. Specifically questions on how to use, getting certain features to work, and questions related to any of the suggested code or use cases on the Lightning Design System Website: https://www.lightningdesignsystem.com/ Lightning Experience UI, Lightning Components, Visualforce, and Lightning App Builder are all different but related tags.

Filter by
Sorted by
Tagged with
39
votes
2answers
14k views

What is suggested approach to transfer VF pages to be lightning ready

So I am planning to transfer our current VF pages to lightning ready. Most of our VF pages are based on a standard controller or standard set controller and use an extension. And they are pretty much ...
21
votes
1answer
3k views

Guidance on styling existing Visualforce pages adequately in Lightning Experience without major rework

PPS This thread pre-dates the <apex:page lightningStylesheets="true" ...that is the first thing to try now. Original Thread Note the existing point - these pages have already been written (there ...
17
votes
3answers
10k views

Can we use the Lightning Design System in Visualforce pages but have the Lightning Experience disabled?

I asked this question to Premier Support but I don't think that they actually know the answer themselves, so am posting here. Is it possible to use the Lightning Design System in Visuaforce pages in ...
16
votes
3answers
616 views

How to access map or object elements dynamically in Lightning?

In VisualForce we could access dynamically to map elements using syntax {!map[mapIndex]} In Lightning if we try to define a map and use this syntax we would receive an error saying Failed to ...
15
votes
6answers
34k views

Show custom error on lightning:input

I was trying if we can validate input in javascript and then post errors on latest lightning:input. But i think it doesn't support such use case. pattern attribute is there but it cant work when i/p ...
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
2k views

Dynamic Component Creation using “force:inputField”

@SkipSauls wrote an amazing article on how to use FieldSets in Lightning Components. Thank you! Link here But it seems like, using this approach, we can only use OOTB aura components (ui:textbox, ui:...
12
votes
1answer
3k views

Lightning : Show Stencil When Component Loads

So I see in the docs for SLDS they talk about using "Stencils" while a page loads. I can't find any examples of how they're implemented. Can anyone point me to any docs or samples that use this?
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 ...
12
votes
1answer
677 views

mCustomScrollbar not working when Locker Service is enabled in Salesforce-1

I am having problem when using mCustomScrollbar (GIT Hub) when locker service is activated. During initialization of mCustomScrollbar in the helper, it throws the following error [TypeError: ...
11
votes
2answers
12k 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
2answers
2k views

Lightning: Get sobject tab icon

Is there a way to get an SObject (Tab) icon (name) to be referenced from the design system resource? I'm building a custom visualforce page that will be displayed using Lightning, so I need to style ...
10
votes
3answers
3k views

Display modal in Salesforce1 with Lightning Components

I'm desperately trying to display a modal in Salesforce1, but can't make it work. My component display information that doesn't fit on one screen so I need to scroll. Problem is that SLDS Modal will ...
10
votes
1answer
505 views

Lightning Design SVG Icons showing in Lightning Experience in MS IE but not MS Edge

I am using the Lightning Design System Utility SVG Icons on a Salesforce page. In addition to appearing as expected in Firefox, Safari, and Chrome, I've also done everything necessary (including using ...
10
votes
2answers
645 views

ui:inputDateTime Behaves Differently in Lightning Component Tab and Visualforce Tab

I have created a component TestComponent <aura:component implements="force:appHostable" > <aura:attribute name="today" type="DateTime" default=""/> <aura:handler name="init" ...
9
votes
1answer
9k views

Parent Field in Lightning Datatable [duplicate]

Are Parent Fields supported in lightning Datatable? I'm trying to display Account Name with Contact information, but it seems parent fields are not supported in lightning datatable. Component: <...
9
votes
1answer
794 views

Lightning Design System with Visual Force Page

I am planning to build a web-to-lead form(Visual Force page) with Lightning Design System. The form will take some inputs from the user and pass the same to controller and controller will perform some ...
8
votes
1answer
32k views

How to display modal popup with a form inside a Lightning component

I need to display a modal popup when i click on event in my calendar with editing details of that event, Please any one suggest me the right way to display popup, i would like to call a "Event Click" ...
8
votes
1answer
369 views

Lightning Web Components Open Source with Lightning Design System (lwc with slds)

I am trying to local development with Lightning Web Component. The https://lwc.dev works good and I want to also add the Lightning Design System style but I am getting errors. I have installed the ...
8
votes
1answer
3k views

Why 'slds-scrollable' class is not compatible with s1 mobile?

Lightning design system provide static resources such as CSS and HTML there isn't any JavaScript. So, why slds-scrollable class is not compatible with s1 mobile? Does this mean that I can't use my ...
8
votes
2answers
1k views

Lightning, what's the preferred way to bind output text? [Best Practise?]

So I'm going through a lot of the Lightning guides, and even through the reference documentation, and I'm coming across a bunch of inconsistencies, and it's either not explained why, or there are ...
8
votes
1answer
397 views

Will Base Lightning Components ever replace complex <apex:> components?

Salesforce just announced Base Lightning Components and Visualforce developer are more than happy to see it. Having to write huge piles of complex html divs for Lightning really feels like a step ...
7
votes
1answer
15k views

How to add waiting time in lightning component controller?

I used setTimeout() of javascript, and my code to be executed is also is getting executed, but somehow the $A.util.removeClass and $A.util.addClass are not working and my component(i.e a Toast written ...
7
votes
2answers
1k views

Visualforce and Lightning Componets: how to get the Lightning-Icon Name on a VF-Page (or LC) for any custom object?

Assume there is a custom object elfBCQuote__c having an Tab and an Icon assigned during object creation via Setup. Now I am on a VF-Page and have only the objects name elfBCQuote__c as string. Is ...
7
votes
1answer
553 views

Account list with Name and Image

Requirement: a lightning component that displays a list of ~5 accounts with their Name and their Account image. Methodology: CMP: <aura:iteration items="{!v.relatedRecords}" var="...
6
votes
1answer
7k views

How to implement on scroll action in lightning to show next few list of records

I want to render many(about 1000) components and I am displaying them through aura:iteration in another aura:iteration. This is causing me performance issues. I want to display only 10 records at an ...
6
votes
2answers
508 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
4answers
11k views

Implementing tooltip in a lightning component

I want to position the tooltip according to the hovered element. How can I do this in lightning without using jquery?
6
votes
4answers
4k views

svg4everybody for svg support for lightning in IE11

I am facing issue with loading icons in IE11 for Lightning application i have. I went through trailhead and found svg4everybody.js which helps to support svg rendering in IE11. can anyone please, ...
6
votes
2answers
23k 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: &...
6
votes
1answer
5k views

Cannot get attribute value from <a> tag when <img> is an element of it

I'm facing a wierd UI issue when I use- <a href="www.someLink.com" onclick="c.controllerFunction" data-attriVal="abc"> <img src="resource/image.PNG"/> </a> In my lightning ...
6
votes
1answer
1k views

What is animating the SLDS Tree chevron

The Lightning Design System includes a Tree component. Each node in the tree can have a chevron svg icon indicating if it is expanded or collapsed. Regardless of the node state it always appears to ...
6
votes
2answers
1k views

Dynamically Creating Icons in Lightning Design System

I am trying to dynamically create buttons to with an icon on them on a Visualforce page using the Lightning Design system. If I hardcode the HTML into the page, everything shows up as expected. <...
6
votes
2answers
8k views

Date Picker in Visualforce page using Lightning design system

I am trying to use date picker in ligtning design system and and using the idea explained in this link to do it: Lightning (SLDS) styling for calendar This works fine in the browser on the desktop ...
6
votes
3answers
6k views

Lightning ui:inputDate component does not inherit style from design system

So I got this really simple component: <aura:component > <form class="slds-form--inline"> <div class="slds-form-element"> <ui:inputCheckbox label="Cancel"/...
6
votes
2answers
760 views

jQuery NiceScroll not working when Locker Service is active

I am having an issue when using NiceScroll (GIT Hub) when locker service is enabled. If the locker is turned off, it work's fine. Code:- Component: <ltng:require scripts="{!join(',', $...
6
votes
2answers
2k views

Lightning QuickAction background color change

On Case object, i have a quick Action "Assign Case" which looks as follows markup looks like this <aura:component implements="force:lightningQuickAction,force:hasRecordId" controller="...
6
votes
1answer
5k views

No COMPONENT error when using svg markup from Lightning Design System

What I'm about to ask is basically a duplicate question of this, but the answer there seems out of date; the URL found in the answer is a broken link. I was able to find an archive of the link but the ...
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
2answers
15k views

Hyperlink a Record in lightning:datatable

Am trying to accomplish a POC in my project. We have a lightning Datatable using . I could generate a set of records to display on the component. But I need one column to be hyperlinked to navigate to ...
6
votes
2answers
925 views

Sales Path - Issue - Lightning Design System

I am trying to sales path using lightning design system css in a vf page. The issue is - there is additional space coming in between stages in sales path. All i can see in chrome developer tools ...
6
votes
1answer
2k views

ui:scrollerWrapper not working in Salesforce1

Newly added Lightning component in the Winter '17, ui:scrollerWrapper which claims to create a container that enables native scrolling in Salesforce1 is not working in Salesforce1 app. CODE: (to ...
6
votes
0answers
328 views

Unable to add custom scroll due to “component/namespace encapsulation” when Locker Service is active

I'm unable to add custom scroll due to the component/namespace encapsulation when locker service is activated in Salesforce1 app. Since the Scrollable is still not compatible with Salesforce1 app, and ...
6
votes
0answers
641 views

lightning:textarea | Scroll not working when the content exceeds the container height in Salesforce1 | Winter '17

I'm facing an issue where scroll is not working in one of the newly released Lightning Base Component in the Winter '17 namely lightning:textarea. The cursor even moves out of the textarea when tried ...
5
votes
2answers
5k views

Attributes and Field clarification from Lightning data service trailhead module

Below lightning component is from Lightning data service module in trailhead Questions 1: Why there are two object attributes used - record , simpleRecord, when one attribute can serve the purpose. ...
5
votes
3answers
8k views

SLDS icon not appearing in visualforce page

Script 1: Does not Work <apex:page > <apex:stylesheet value="{!URLFOR($Resource.slds221, 'assets/styles/salesforce-lightning-design-system.min.css')}"/> <svg aria-hidden="true" ...
5
votes
1answer
9k views

Implementing SLDS in Lightning Application/component

I've a question on implementing SLDS in lightning apps and commponents. I was going through a tutorial where I saw the instructor is installing slds unmanaged package and then referring the static ...
5
votes
1answer
11k views

force:slds and lightning components

When extending an app using force:slds <aura:application extends="force:slds"> <!--component reference> </aura:application> This should give me the logo instead of the alt ...
5
votes
4answers
5k views

Lightning system datepicker icon not in input box?

Im building a lightning experience app and i have created a ui:inputDate field with displayDatePicker="true" But the date picker always appears outside the input box, or if i get it inside the input ...