We’re rewarding the question askers & reputations are being recalculated! Read more.

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
6
votes
0answers
332 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 ...
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 ...
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 ...
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: <...
2
votes
1answer
1k views

Show/Hide CSS Ignored When Inside an SLDS Grid Column

I'm just trying to get a simple show/hide experiment running using the code below. It runs fine when the code is outside the SLDS grid. However when I place the div inside a grid column, the console ...
4
votes
3answers
4k views

Modal pop up issue; background is not fading and pop up does not appears on whole browser lightning page

<div aria-hidden="false" aura:id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open slds-hide" style="width: 60%; margin: auto; "> <div class="...
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 ...
15
votes
6answers
36k 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 ...
2
votes
1answer
1k views

Are toasts not generated in standalone app or in VF page?

I am dynamically creating a toast as shown below. This toast is created when response is received from server. I have created a component for toast and am dynamically creating it using $A....
6
votes
2answers
16k 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 ...
3
votes
2answers
1k views

Close Lightning Modal by clicking anywhere outside of it

Just wondering whether this is possible? i.e. once a modal is open, close it by clicking anywhere on the grey backdrop? I've tried invoking my custom close-modal function via: - Adding onclick to the ...
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" ...
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 ...
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
0answers
647 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 ...
4
votes
1answer
2k views

Visualforce RenderAs PDF not supporting SLDS CSS

I have a VF page built on Lightning Design system (LDS) framework. When I add the renderAs="PDF" attribute, pdf does not show the content with LDS CSS/Style. Reference Link: SLDS not rendering CSS ...
3
votes
2answers
5k views

How to use force:createRecord for a stand alone app or lightning out?

I'm trying to use force:createRecord and it works okay in Lightning Experience, and S1 but but I get the following error message when I am using a stand alone app. If I preview the "...
3
votes
1answer
273 views

How to use lightning base components

I'm trying to use lightning base components in some components but I only got basic html component in my page. For example I add this button : <lightning:button variant="brand" label="Précédent" ...
3
votes
1answer
4k views

$A.util.removeClass not working in some cases

On init of a component, I want to hide an element lightning:buttonIcon if some condition is satisfied(see controller code). In this case it is getting satisfied and I am reaching the code where ...
2
votes
1answer
390 views

visualforce page to list cases by contact using 'case.AccountId' for Person Account - Lightning Design

I have a business use case demand to show a list of Cases for the current associated Contact on the Case Feed in Service Console. I was able to achieve this with the below VisualForce Page: I was ...
1
vote
1answer
5k views

Button that triggers modal

I am using Salesforce Lightning Design system and I'm currently working on a local html file and would like to create a button that when clicked, will cause a modal to open. I'd like to have a similar ...
8
votes
1answer
33k 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" ...
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:...
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 ...
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
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?
5
votes
2answers
6k 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. ...
4
votes
1answer
831 views

VF page looking like Lightning

In Lightning when I click new account button or new contact button a Lightning styled page appears in the form of popup. However, when I override this button, because I want my custom page for ...
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 ...
4
votes
1answer
2k views

Difficulty displaying an Input with Icon using Lightning Design System

I'm working on creating a Visualforce page that uses the Lightning Design System. As part of the VF page I'm trying to include an text input field which the user will use to input search terms. I ...
4
votes
2answers
4k views

Is this possible to position label for inputCheckbox on the right hand side?

When I try to use standard lightning tag ui:inputCheckbox it displays label on the left <ui:inputCheckbox label="Checkbox label" labelClass="uiLabel-right" value="{!v.checkbox}" change="{!c....
3
votes
1answer
4k views

Remove vertical ScrollBar from Lightning Page

I am relatively new to Salesforce lightning and HTML/CSS. I was trying to create a Custom Grid to display Data with Pagintation(infinite scrolling). It all went well till i started solving the issue ...
3
votes
1answer
2k views

Lightning Component SVG Not Rendering in Community

Using Community Builder, I have an svg component that's not properly rendering an icon (using SLDS 1.2.2). I've followed the docs exactly as written for the components: my outer-component that I am ...
3
votes
2answers
1k views

How to use progress ring with lightning component

In recent release salesforce has released progress ring part of SLDS. https://www.lightningdesignsystem.com/components/progress-ring/#content I am little confused on how to use this with lightning ...
2
votes
2answers
1k views

Lightning component with SLDS

I try to build a lightning component with SLDS, lightning design system. The component I want is the tabs. So I use the code given by lightning design system, but since it is static i need to use ...
2
votes
0answers
153 views

Why in LEX aura:doneWaiting is firing before aura:waiting?

Why in LEX aura:doneWaiting is firing before aura:waiting? I am showing spinner mask on aura:waiting and hiding it on aura:doneWaiting, and my mask is shown forever because aura:doneWaiting is firing ...
2
votes
1answer
1k views

How to set only Time for ui:inputDateTime tag at first time in Lightning?

I want to default time to 9:00 AM when user selects date first time. Still He is allowed to change the time. I am using below tag for DateTime input field: <ui:inputDateTime aura:id="startDate" ...
1
vote
2answers
403 views

fire @wire on an event change LWC [closed]

I have a picklist in a combo-box, on change of the picklist value @ wire method should fire is it possible or what is the work around??. As per the below example when this.l1productId value changes in ...
6
votes
2answers
771 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
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, ...
4
votes
1answer
1k views

Unable to use SVG in Lightning Components with LockerService activated

I've activated LockerService in my pre-release org, and I'm running into a problem with svg. As currently svg isn't supported by Lightning, I'm using the custom svg component as described in the SLDS ...
3
votes
2answers
2k views

Fixed div in Salesforce1 using lightning components

Although this may not be salesforce specific issue but its remotely related to Salesforce and occurring only in Salesforce1 mobile app. I am trying to fix a div at the bottom of my screen using the ...
3
votes
1answer
2k views

ui:inputCheckbox and lightning design system

I'm trying to apply styles for checkboxes from Lightning Design System in my custom Lightning component. I would like to use <ui:inputCheckbox> standard lightning component, but looks like not ...
3
votes
3answers
1k views

Rendered as PDF apply Lightning Design System

I want to known suggestion about lightning design system rendered as PDF. I have a VF page that page rendered as PDF format. My page is also using lightning design system. but that designs are not ...
3
votes
1answer
4k views

I have lightning component and want to show lightning card when mouse over on the link,

I have lightning component and want to show a lightning card on mouseover on the link, is there any lightning event I can call to show to popup mobile card? this is my code: ===apex-Controller=== ...
3
votes
2answers
3k views

Lightning SVG Icon Component Helper - SVG class not being set

I am quite lame with CSS, but noticed something about this helper. var classname = component.get("v.class"); var containerClassName = [ prefix+"icon__container", prefix+"icon-"+category+"-"+...
2
votes
2answers
1k 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 ...
2
votes
1answer
2k views

Allow to enter percentage values between 1…100 with lightning:input

I am unable to configure a lightning:input to allow a user to input 50 when he wants 50%. It always does strange conversions. Please provide me with a <lightning:input type="number" formatter="...
2
votes
2answers
647 views

Custom Scroll not working when Locker Service is active

I'm using an external scroll plugin viz. mCustomScrollbar (GIT Hub) to add scroll functionality dynamically to div. Since I am unable to use ui:scrollerWrapper, newly added Lightning component in ...
2
votes
3answers
4k views

How detect a scroll event in lightning component when there are multiple scroll bars

I have scenario where I implemented a datatable with in a lightning component with scrollable y axis. Now the challenge is there are two scroll bars. One for lightning component and another one for ...