The Stack Overflow podcast is back! Listen to an interview with our new CEO.

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
5
votes
2answers
782 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.
5
votes
2answers
335 views

How can I make a Lightning ui:InputDateTime control look like the Lightning Experience DateTime picker?

I'm working on some Salesforce lightning components and I need a nice DateTime control. The component reference lists the ui:inputDateTime control and this control supports the functionality, but it ...
5
votes
2answers
3k views

make buttonIcon icons bigger

How can I change the size of an icon inside of a lightning:buttonIcon ? <div class="slds-grid slds-grid--vertical"> <div class="slds-col"> <lightning:...
5
votes
2answers
4k views

Dynamic inputSelect options not showing first value

I've got a ui:inputselect picklist that is populated from a call to the server. The first value I get I'm setting to be the default by setting selected to true. I put a break in the js code to see ...
5
votes
1answer
432 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
2answers
366 views

New SLDS class and attribute as of Spring '18 release - no documentation

I've noticed a new SLDS class that is being applied in Lightning Experience. There doesn't seem to be any documentation whatsoever of this class and it's not mentioned in the Spring '18 release part ...
5
votes
0answers
3k views

Lightning Date properties issues

I need to perform a simple business task. I need to alter date property before sending it to server to minimize server response time. I need to use LEX (Lightning Experience). I have declared my ...
5
votes
0answers
927 views

ui:inputDate and SLDS

The SLDS date picker depicted here looks lovely: https://www.lightningdesignsystem.com/components/datepickers/ The stock ui:inputDate is very functional and I like how it falls back to native date ...
4
votes
3answers
338 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
5k 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 ...
4
votes
5answers
4k views

Lightning Design System Tabs not working

I tried doing this but the tabs dont work. When I click to Item Two, it doesn't navigate. What am i missing? <div class="slds-tabs--scoped"> <ul class="slds-tabs--scoped__nav" role="...
4
votes
1answer
804 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
940 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
7k views

How to populate lightning:select with picklist field values?

Everything I have read online so far suggests that one must manually declare picklist (option) values when creating a lightning:select component in an Lightning application. For us, this is less than ...
4
votes
2answers
11k views

Lightning Data Service Trailhead Challenge Error (Manipulate Records with force:recordData)

Can some one explain me how to use two separate components with Lightning Data Service, i tried the following code for accDisplay and accEdit for this challenge . My code worked as i expected but i ...
4
votes
4answers
4k views

Play Video in Lightning page

If I can get the download url of a video which is uploaded in my Salesforce org, is there a way to play the video in the lightning page or play on a pop up video player on click ? (Not using the ...
4
votes
1answer
413 views

Visualforce $Asset violating CORS

When using the $Asset global variable in Visualforce, it looks like Salesforce is trying to load resources from na38.salesforce.com instead of c.na38.visual.force.com. This is causing it to violate ...
4
votes
1answer
714 views

Lightning SLDS Confusion

Hi I have few question on SF -SLDS: 1. When should i use Ui:Button, and when should I use lightning:button? 2. I want to align slds-form-element__control with in slds-form-element to right. How to do ...
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 ...
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....
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 ...
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
1answer
107 views

Standard way to show “empty ui” loading in Lightning Web Component

Is it possible to use standard functionality to show empty component on loading (instead of loading spinner)? For example in lead convert mapping we can see empty table and then all data inside:
4
votes
2answers
3k views

Align lightning:button with lightning:input when input validation error occurs

I am using the following lightning:layout grid to get input field and button to behave nicely: <lightning:layout verticalAlign="end"> <lightning:layoutitem padding="around-small" ...
4
votes
2answers
1k views

Apex Chart not rendered in Lightning Design System

I developed a really simple page where I have several apex bar charts, based on values calculated in an apex controller. Now, when I put the charts into a <div class="slds"></div>, the ...
4
votes
1answer
411 views

Can't get Component Action to style properly (modal footer+ select options)

I'm a CSS newbie, so this might be a trivial question. Nonetheless I need help. I have this Lightning component used as action on a button. <aura:component controller="..." access="GLOBAL" ...
4
votes
1answer
2k views

How to display fieldset fields in a 2 column fashion with Lightning DS?

I'm trying to use LDS to display some fields in a VF page. Most sections in this page display the data with 2 fields per row with its label like the pageBlockSection tags do. This page was a regular ...
4
votes
1answer
838 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 ...
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="...
4
votes
1answer
820 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 ...
4
votes
1answer
565 views

Lightning Components in Visualforce - datepicker, icon style inconsistency

Based on trailhead module or documentation: Lightning Components Basics Trailhead Module Lightning Components Developer Guide I have added lightning component to visualforce page: $Lightning.use("c:...
4
votes
4answers
3k views

Datepicker not displaying properly lightning component

I have following lightning component. sp.cmp <aura:component controller="Pledge_Mgmt_Controller"> <aura:attribute name="paymentList" type="Map[]" /> <div> <div ...
4
votes
2answers
737 views

Lightning:overLayLibrary issue Uncaught (in promise) TypeError: Cannot read property 'la' of undefined

trying to implement the Modal using Lightning:overLayLibrary as per this link lightningOverlayLibrary i am facing the below issue Uncaught (in promise) TypeError: Cannot read property 'la' of ...
4
votes
1answer
2k views

columns flexing to occupy empty space in Lightning Design System

I have created a grid which should accept 3 columns of size 1 of 3. The issue is, if i create only two columns they stretch to occupy full space rather than leaving an empty space for the column not ...
4
votes
1answer
3k views

Lightning Component - Sort table columns

I am trying to show a list of cases related to an account in a table view. I am using Lightning Design System to show a table and iterate through a list of cases. Is there a way to sort this table ...
4
votes
1answer
451 views

Working with Lightning Design System framework, locally

I'd like to design the front end of my app using the Lightning Design System framework before I hook it up to the backend of my salesforce org. I downloaded the resources from the Light Design System ...
4
votes
1answer
2k views

Best way to markup the Lightning Design System Input Field

I was going through the documentation for using the Lightning Design System in Visualforce pages and I noticed what seems to be an inconsistency with how they markup the Input fields. In the official ...
4
votes
0answers
393 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 ...
4
votes
1answer
190 views

About table and SLDS

We're working in a wizard implemented in angularjs + slds. There's an autocomplete widget based on [angucomplete-alt] component and the component is embeded in a <table>. But when the user types ...
4
votes
1answer
574 views

<use> tag in an <apex:repeat /> preventing reRender of apex:repeat

I'm creating a VF page using the Salesforce Lightning Design System, as part of this, I want to use SLDS Notifications to display page messages and other notifications. <apex:outputPanel layout="...
4
votes
1answer
411 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
0answers
376 views

How can we place standard Quick Actions in a Custom Activity Timeline component?

With Winter '17, the Activity Timeline component of SLDS has been improved to also include Quick Actions like (Log a Call, New Task, New Event). Earlier it only showed the Activity Timeline view. ...
4
votes
2answers
3k views

Getting original element from onclick?

I am trying to implement an onclick listener that will take the div clicked and get the data-id from the element and call an apex method with it. Here is my code snippet. <aura:iteration var="...
4
votes
0answers
712 views

Lightning Design System Table Footer

I'm using the Lightning Design System to style an apex:dataTable in Visualforce, and so far, all is well. It looks beautiful, the size is right, the headers show as expected. I'm embedding it in a ...
3
votes
2answers
893 views

Lightning datepicker for visualForce page

I have a field with date/time dataType and using that field in VF page, initially date picker was not visible then changed standard stylesheet = "true" (is this the only option) and everything works ...
3
votes
1answer
270 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
3answers
13k views

visual force apex table code to look like lightning experience?

How do I change my visual force apex table code to look like lightning experience? my VF code is here: <apex:page standardController="Place__c" extensions="AccountsinPlacesExt"> <...
3
votes
1answer
947 views

what are good prototyping tools for Lightning Experience? [closed]

I am looking for some tools that I can design Lightning Experience prototypes in.
3
votes
1answer
773 views

Dynamic lightning:map assistance

I'm working on a dynamic mapping system wherein users input an address and can then have a google map displayed relating to accounts within a radius of that address. I've got it so my list of ...