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.

171 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
12
votes
1answer
696 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: ...
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 ...
6
votes
0answers
648 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 ...
5
votes
2answers
369 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
1answer
417 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
928 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
0answers
407 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
0answers
387 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
0answers
719 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
1answer
153 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 ...
3
votes
0answers
400 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 ...
3
votes
0answers
314 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? ...
3
votes
0answers
416 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 ...
3
votes
0answers
827 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-...
3
votes
1answer
613 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 ?` <...
3
votes
0answers
678 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 ...
3
votes
0answers
302 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 ...
3
votes
0answers
463 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 ...
3
votes
0answers
556 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 ...
3
votes
0answers
271 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'...
3
votes
2answers
153 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 ...
3
votes
1answer
543 views

Radio Button in Lightning Design

I want to use radio buttons in Lightning Design. In my Visualforce page, I am retrieving the options from my controller and doing something like this: <apex:repeat value="{!SiteDetails}" var="rad"&...
3
votes
0answers
191 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 ...
3
votes
0answers
539 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. ...
3
votes
1answer
799 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"> <...
2
votes
1answer
69 views

Open LWC as a full page without salesforce header

I have a button on Lightning Record page. On click i am redirecting to a LWC. Is there anyway where i can redirect or open the LWC in a full screen page. As of now it is opening with salesforce main ...
2
votes
1answer
99 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 ...
2
votes
0answers
49 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 ...
2
votes
0answers
1k 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 ...
2
votes
1answer
367 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 ...
2
votes
0answers
354 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-...
2
votes
0answers
273 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 ...
2
votes
1answer
734 views

lightning:tab - wrap label text

did anyone was able to work with lightning:tab and find way to wrap text in label of tab? <lightning:tabset selectedTabId="{!v.selTabId}" > <lightning:tab aura:id="tab1" id="...
2
votes
1answer
1k 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 ...
2
votes
0answers
96 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 ...
2
votes
0answers
214 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 ...
2
votes
0answers
857 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="...
2
votes
3answers
2k 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 ...
2
votes
1answer
882 views

How to constantly display scrollbar in iOS using <ui:scrollerWrapper> element?

I would like to display scrollbar always in iOS devices when implementing scroll functionality using <ui:scrollerWrapper> element in Salesforce1 app which was recently fixed in Winter '17 ...
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
0answers
812 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 ...
2
votes
0answers
114 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:
2
votes
1answer
291 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 ...
2
votes
0answers
189 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 ...
1
vote
0answers
61 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 ...
1
vote
1answer
49 views

Progress Ring fill clockwise

I am using Brian's Progress Ring Component here- https://gist.github.com/brianmfear/d1308608c0facdc626b85c9c248fc7af It works great, however it fills in anticlockwise way. I have a requirement to ...
1
vote
1answer
81 views

Issue with firing an event inside window.setTimeout

I am not able to find where i am doing wrong. i have a parent component A with two child components B and C my scenario is to fire an event in window.setTimeout of component B and send it to ...
1
vote
0answers
57 views

Change the style of 1st list's element through onclick from 2nd list's element

I have 2 lists. First is all my objects. Second - selected object (I use "Select" button to add my obj to second list but without deliting it in the first list). I can also delete the objects from the ...
1
vote
1answer
359 views

How to make lightning:progressIndicator read only?

We have a data entry form and we are using lightning:progressIndicator as a way to show their progress. However, we don't want the user to click-ahead nor do we want them to click back on the progress ...