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
1answer
10k 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
14k 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 ...
5
votes
2answers
1k 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
357 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
4k 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
516 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
0answers
517 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 ...
5
votes
1answer
428 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 ...
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
935 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
391 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
5answers
5k 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
1k 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
1k 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
3answers
14k 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"> <...
4
votes
2answers
8k 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
12k 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
5k 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
3answers
304 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 ...
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
416 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
728 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
5k 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
5k 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 ...
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
158 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
4k 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
476 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
875 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
2answers
925 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>...
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
884 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
593 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
5answers
4k 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
1k 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
505 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
1answer
214 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
0answers
905 views

Selenium testing the Lightning Experience

I'm new to SalesForce and trying to use Selenium to test a page. When I check the "innerHTML" of a certain div (as selenium sees it), I see the following: <div class="test-id" data-aura-rendered-...
4
votes
1answer
596 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
0answers
400 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="...

1
2
3 4 5
15