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.

216 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
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: ...
SE_User's user avatar
  • 2,293
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 ...
Anish Shrestha's user avatar
7 votes
0 answers
420 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 ...
SE_User's user avatar
  • 2,293
7 votes
0 answers
984 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 ...
SE_User's user avatar
  • 2,293
6 votes
0 answers
4k views

Can Lightning SLDS icons be displayed in formula field without using static resources?

I want to display an icon in a formula field based on the value in another checkbox field on my object. I would like to use the standard Lightning SLDS icons here. I've found a way to achieve this ...
Aislinn Hayes's user avatar
6 votes
1 answer
518 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 ...
Koen Faro's user avatar
  • 773
5 votes
0 answers
1k 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-...
user2709365's user avatar
5 votes
0 answers
4k 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 ...
Patlatus's user avatar
  • 16.8k
5 votes
0 answers
954 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 ...
Charles T's user avatar
  • 11k
5 votes
0 answers
1k 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 ...
Christian Carter's user avatar
4 votes
0 answers
735 views

Lightning: how to get dynamic scrolling height work?

I am trying to implement scrolling in Lightning app with standard Lightning SLDS styles and it is not working. I tried both ui:scrollerWrapper and class="slds-scrollable--y" and neither of these is ...
Patlatus's user avatar
  • 16.8k
4 votes
0 answers
594 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. ...
VarunC's user avatar
  • 5,950
3 votes
1 answer
316 views

Is it possible to hide the masterLabel from outputting onto the page in Salesforce Mobile?

I created a custom lightning:appHomeTemplate with custom columns and rows. However, the only thing I wanting to do now to finish this, is to not have the Label output into the app page. The Label ...
rouqeOne's user avatar
  • 115
3 votes
0 answers
655 views

Loss of Lightning Card style on reRender of outputPanel in Visualforce

I have a visualforce page that gets initially loaded, then an action function is triggered that does a webservice callout. Once the action is finished and the output panel rerenders, I am losing the ...
JRiffe's user avatar
  • 1,653
3 votes
0 answers
393 views

Lightning components: how to make component aware of position on record page

I'm trying to render two different views depending on where my component is placed on a record page from Lightning App Builder. Is there an attribute or something that I could pass into an aura:if? ...
Stuart's user avatar
  • 71
3 votes
0 answers
476 views

How to leverage new Dynamic Icons from SLDS

Interested in trying to use the new Dynamic Icons (https://www.lightningdesignsystem.com/components/dynamic-icons/) from SLDS in a Lightning Component but can't quite figure out how... Do I need to ...
Tyler Carlson's user avatar
3 votes
1 answer
812 views

onclick not working for ui:outputcurrency

I have code that iterates over a list. for some reason the onclick method does not seem to fire. Is there something wrong in my code below? Also how can I get the index id of the clicked row ?` <...
sfdcdev's user avatar
  • 361
3 votes
0 answers
872 views

How do you apply Lightning Design System CSS Styling to force:inputField?

I'm trying to use force:inputField so that I can get the picklist values on a picklist field of a custom object. If I preview the "sampleCreateRecordApp.app" the force:inputField does not have CSS ...
jojopogi's user avatar
  • 492
3 votes
0 answers
662 views

How to develop gif like image in lightning component using sprites?

I want to use a down arraow, which is jumping continuously to prompt user to click on it. I want it something like a spinner which is by default spinning when we include it in code. So for the ...
Sarang's user avatar
  • 2,580
3 votes
0 answers
987 views

How to make table align correctly Salesforce Lightning design system Javascript Table

I was able to append my data, and now the data does not align correctly with the column headers as well as it is not sortable (in the code I have sortable enabled. and the check boxes do not align ...
Jason's user avatar
  • 121
3 votes
1 answer
594 views

ui:inputText getting zoom in

I have an input text as <div class="slds"> <div class="slds-form"> <div class="slds-form-element " > <ui:inputText aura:id="textSearch" class="slds-input ...
Swapnil Kale's user avatar
3 votes
0 answers
318 views

Salesforce communities: Issues with Using Custom Stylesheets and SLDS

Background: We currently have several lightning components our community that reference several static resources. To load the static resources, I am using <ltng:require> component. Issue: Let's ...
Karthikeya Pammi's user avatar
3 votes
2 answers
171 views

Salesforce access check warnings

Suddenly access check warnings have started popping up in my browser's console. This started happening this week only. I have been working on this application for past 2 weeks and I never saw a single ...
ashish n's user avatar
3 votes
0 answers
548 views

Not able to use svgForEveryone for Salesforce Lightning Design System

I'm developing an app for Salesforce1 platform using Lightning Components and the UI framework is Lightning Design System. I'm partially successful implementing the SVG icons in different browsers. ...
user avatar
3 votes
1 answer
1k views

Scrollbar inside scrolling modal not clickable

I'm using the latest Appiphony Strike components to built a multiselect picklist inside a modal. <aura:component > <c:strike_modal title="Strike Modal" showModal="true"> <...
Robert Sösemann's user avatar
2 votes
0 answers
32 views

Branding Setup Page and SLDS Tokens

Is there a place or has someone documented which SLDS Design Tokens that are marked "Themeable" Yes match up with what is presented on the "New Custom Theme" under the Themes and ...
Bryan Anderson's user avatar
2 votes
0 answers
264 views

How to avoid using position:absolute in stylesheets for aura components due to security concerns as mentioned in the ISV guide

I'm trying to pass security review for my managed package. I have to a security issue to address: Unsafe CSS position declaration: position: absolute; The Salesforce Platform tries to ensure that ...
Aggressive Pickle's user avatar
2 votes
0 answers
604 views

Customize Lightning:helpText popup

I've tried to modify the style of the lightning:helptext popover by following Tooltips- Lightning Design System, but it's not working. Here's my code: <lightning:helptext iconVariant="...
chloe's user avatar
  • 243
2 votes
0 answers
236 views

How to make lightning-layout-item grow horizontally or vertically or both?

I'm trying to create a flexible layout using lightning-layout and lightning-layout-item base components in LWC. The screenshot of the basic idea is given below. Appreciate inputs on how can we achieve ...
Akshay Poddar's user avatar
2 votes
0 answers
93 views

Change progress indicator design - Custom Journey Activity

We are currently developing a multi step Custom Activity within Marketing Cloud. The UI for the steps is quite old fashioned, as you can see from the picture bellow: There is a newer design within ...
Joao's user avatar
  • 21
2 votes
0 answers
128 views

UI Scroller added around a custom modal automatically by Salesforce on mobile

I have a modal that contains a recordEditForm in its body. When I open the modal on mobile, a UIScroller is added by Salesforce automatically. This causes the entire modal to scroll, instead of just ...
Bhargav Shah's user avatar
2 votes
0 answers
632 views

Show Popover on Scroll-able Div

I have a custom component which display list of result and a popover like below - When i make the div scroll-able, it looks like below, (Reason for scroll - List of result is too long) - Popover ...
Nirmallya Ghosh's user avatar
2 votes
1 answer
803 views

Unable to upload the LDS 2.10.0 as static resource

As we know that static resource has a limit of 5MB, I am trying to upload the LDS winter 20 as static resource, but its size is more than 5 MB https://lightningdesignsystem.com/downloads/ In this ...
Quddus's user avatar
  • 177
2 votes
1 answer
368 views

Set relative height for ui:scrollerWrapper

I'm trying to implement a ui:scrollerWrapper for a Lightning Component in a quick action in the Salesforce app. I'd like to have a scrollable section that occupies 60% of the screens height, so I ...
Lachlan B's user avatar
  • 313
2 votes
0 answers
64 views

Salesforce1 on focus on textarea header top is hiding

I have seen the same, or a similar, issue. The problem I encountered also occurs on a mobile device (Android in this case) with a textarea component at the bottom of a container component that extends ...
Gopalakrishna Boddepalli's user avatar
2 votes
1 answer
504 views

Display path from right to left

I want to display a field status in a very visual way, the path component is ideal (any of them, for example lightning:path or even the slds one): Problem: Displaying that component from right to ...
Itai Shmida's user avatar
  • 5,025
2 votes
0 answers
556 views

Lightning design Grid layout does not work in IE11

i have a problem in IE11 grid layout slds-size-** which is making a grid as bad way but in other browser is great all working fine .. <div class="slds-card__body"> <div class="slds-...
Manish Joshi's user avatar
2 votes
0 answers
504 views

ui:inputCheckbox disabled property not working in Microsoft edge

I am dynamically rendering disabled property of checkbox to true or false from controller. This works fine for other browsers but does not for Microsoft Edge. The checkbox remains disabled, i.e it is ...
Sarang's user avatar
  • 2,580
2 votes
1 answer
2k views

Visualforce lookup field with apex:inputField in LEX?

Simple story: As a sales user, I want to mass assign leads to a teammate, so I can better distribute our total workload. The constraint is that I need to do this in Lightning Experience, in which the ...
Marty C.'s user avatar
  • 4,449
2 votes
0 answers
880 views

Chatter in Apex using Lightning components

I'm fairly new to Lightning Design System.So need some guidance here. I'm trying to build Chatter in Apex using Lightning components. Using rest Api, I am getting the Chatter Feed of a group in my org ...
Brav's user avatar
  • 820
2 votes
0 answers
141 views

Unwanted padding bottom in app.css inside Lightning Experience overriding SLDS styling

And now, there's yet another new issue even in Lightning Experience[Desktop]. Here's the screenshot of the same:- The above screenshot shows an unwanted padding-bottom of 2.5rem in a class named ...
SE_User's user avatar
  • 2,293
2 votes
0 answers
240 views

Applying CSS to force:recordView in lightning:component

I'm trying to use force:recordView and it works okay in Lightning Experience, and S1 but but when rendered in a stand alone app, the SLDS CSS are not applied - that is if I preview the ...
jojopogi's user avatar
  • 492
2 votes
0 answers
2k views

Lightning is showing unnecessary blue border around slds-grid elements

A blue border is shown around slds-grid elements which disappears when inspector is opened. I have tried applying 'border:0px;', 'border-collapse:collapse' in CSS. But it didn't work. <div class="...
nilesh_ramteke's user avatar
2 votes
4 answers
5k views

Binding a click event to document Lightning Component

I am using SLDS Picklist in Aura Component, I am trying to close the picklist when user clicked outside the picklist. I am trying to bind a click event to document and call the action to close the ...
Vijay's user avatar
  • 43
2 votes
0 answers
172 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 ...
Patlatus's user avatar
  • 16.8k
2 votes
0 answers
2k views

help text in lightning component using CSS

I have below line of code which will show help text when user will hover over question mark. <div> <div class="helptext" onmouseover="{!c.applyCSS}">?</div> <div ...
salesforce Developer's user avatar
2 votes
0 answers
167 views

Salesforce Lightning Design System : Can we create side bar menu similar to lightning experience using LDS?

Salesforce Lightning Design System : Can we create side bar menu similar to lightning experience using LDS? Here is the attached sample:
Pratik Bagadia's user avatar
2 votes
1 answer
402 views

Tab of Lightning Design System

I have 2 problems: I'm trying to use the tab tag in salesforce lightning : https://www.lightningdesignsystem.com/components/tabs (i use the first one) but my tab is not responsive to the width of ...
polling's user avatar
  • 21
2 votes
0 answers
239 views

How to make usable deep-links into the Lightning Design System documentation?

Do you know any way to quickly lookup the same documentation for LDS again and again. My habbit is to use deep-links and create collections of the content I need every day. Unfortunately the LDS ...
Uwe Heim's user avatar
  • 28.4k
2 votes
0 answers
190 views

Lightning Design System svg on Console vf page

We have a vforce page with a list of items and actions over it. We are applying lds on the page and found out that if we use buttons with svg icons, when displaying the page in the console, those ...
user25208's user avatar

1
2 3 4 5