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.
892
questions
40
votes
2
answers
18k
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 ...
- 13k
22
votes
1
answer
4k
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 ...
- 137k
19
votes
1
answer
4k
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 ...
- 385
17
votes
5
answers
21k
views
Hide Standard Page Header in Custom Lightning App page
Is there a way to hide the page header in a custom Lightning App shown below ?
This banner is not available in the Edit page section.
I have selected 'One region Template' and added just one ...
- 819
17
votes
6
answers
78k
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 ...
- 36.3k
17
votes
2
answers
32k
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"...
- 615
17
votes
3
answers
11k
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 ...
- 3,740
17
votes
3
answers
8k
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 ...
- 2,142
16
votes
3
answers
5k
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 ...
- 17.4k
15
votes
5
answers
12k
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 ...
- 193
14
votes
3
answers
4k
views
How to get the display density in a lightning components controller?
Is it possible to see if a user is in Comfy or Compact display density in a lightning controller? This is a new feature since Winter '19 and I cant find any documentation about this.
- 353
13
votes
2
answers
4k
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 ...
- 763
13
votes
3
answers
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:...
- 1,205
12
votes
1
answer
4k
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?
- 2,163
12
votes
3
answers
6k
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 ...
- 8,695
12
votes
1
answer
5k
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 ...
- 777
12
votes
1
answer
1k
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: ...
- 2,283
11
votes
3
answers
17k
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" ...
- 395
11
votes
2
answers
46k
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 ...
- 113
10
votes
1
answer
21k
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:
<...
- 3,380
10
votes
3
answers
26k
views
LWC lightning-card border not shown with slds-card_boundary
Playground example
https://developer.salesforce.com/docs/component-library/tools/playground/KLHs3GU9
I have a Lightning Web Component template with a lightning-card in an App Page.
<template>...
- 3,736
10
votes
1
answer
725
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 ...
- 617
10
votes
2
answers
877
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" ...
- 3,536
9
votes
3
answers
57k
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:
&...
- 2,161
9
votes
1
answer
47k
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" ...
- 692
9
votes
1
answer
949
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 ...
- 1,265
9
votes
1
answer
30k
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 ...
- 2,655
8
votes
1
answer
9k
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 ...
- 2,655
8
votes
2
answers
14k
views
LWC datatable Header wrapping
I am working on a LWC component where in a lightning datatable I have more than 7-8 columns. When I add the component into detail section of a record page, the headers of the table is getting ...
- 81
8
votes
3
answers
14k
views
lightning:card Icon size
Is there a way to set icon size? Like in this example:
<lightning:card iconName="action:flow" title="My beautiful title">
Is there an equivalent of
class="slds-icon_xx-small"
I have tried ...
- 113
8
votes
1
answer
5k
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 ...
- 828
8
votes
2
answers
2k
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 ...
- 547
8
votes
1
answer
461
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 ...
- 38k
7
votes
2
answers
15k
views
How can i use var() in css in LWC?
This is what I'am trying to do:
HTML:
<li class="navBar2" style="--lwc-beforeColor: #0ec2df"></li>
.css
.navBar2{
height:29px;
background-color: var(--lwc-beforeColor);
}
But ...
- 103
7
votes
1
answer
5k
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 ...
- 3,996
7
votes
2
answers
673
views
Winter'21 Release - BEM Notation Change
Does BEM notation change have an impact on all of the components where SLDS is used?
Earlier the SLDS was being included as a static resource but off-late it is not necessary to do that.
In this link: ...
- 1,357
7
votes
2
answers
2k
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 ...
- 28.5k
7
votes
1
answer
769
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="...
- 95
7
votes
0
answers
2k
views
Date picker calendar not showing on top in lightning component
This is my lightning component
The problem is my date picker is displaying on the back and I am unable to select the date. I am using this Lightning component in quick action button.
The code for my ...
- 300
7
votes
0
answers
424
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 ...
- 2,283
7
votes
0
answers
991
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 ...
- 2,283
6
votes
1
answer
8k
views
SLDS styles not being applied to Preview mode
I am beginning to make a simple app and I am using SLDS. When I preview the app from the Developer Console, the SLDS styles are not being applied. But if I put the component on a Lightning Community ...
- 2,956
6
votes
1
answer
15k
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 ...
- 615
6
votes
2
answers
664
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, ...
- 313
6
votes
2
answers
4k
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?
- 13.7k
6
votes
2
answers
4k
views
Dynamically changing lightning button icon name with setAttribute not working
I'm trying to change the icon of a lightning button icon but the image isn't changing however I see that the attribute is being updated.
this.template.querySelector('#'+event.target.id).setAttribute(...
- 273
6
votes
1
answer
7k
views
Unable to use SLDS Icons in Lightning Web Component
I am developing an app and I need to add SLDS icon with custom color (i.e. green or blue) to the UI.
Which is why I can't use <lightning-icon> component because you can override it style.
Thus ...
- 413
6
votes
4
answers
25k
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?
- 491
6
votes
4
answers
5k
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, ...
- 127
6
votes
1
answer
7k
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 ...
- 71