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
1
vote
1answer
994 views

Create a chart in Lightning

I want to create a chart map in lightning something like this where the names are marked on a point on the base map based on 2 scores. I don't see any option to create as such using scatter chart or ...
1
vote
1answer
204 views

Lightning Design System - Custom Icon Styling Not Working On My iOS app

As per the LDS guidelines, I did the following pod install and then added the following to my ViewController #import <DesignSystem/DesignSystem.h> UIImage* customIcon = [UIImage ...
1
vote
2answers
43 views

Increase Spacing Between Lightning-Icon and title

Trying to get the spacing between this icon and text. Any advice? <h3 slot ="title" class="slds-card__header-title slds-media__body"> <lightning-icon icon-name="standard:...
1
vote
1answer
339 views

Custom Style For Lightning Toast

Is there a way to customize the style (color, font-size, height) of lighting toast? I'm trying with css but have no success.
1
vote
2answers
222 views

issue with Summer'19 release

Guys I could see that the comfy and comfort views for lightning experience have been changed. If you could see the below screenshot I have use a lightning select in a modal popup(custom lightning ...
1
vote
1answer
241 views

How to position an element to center inside of a grid column?

On my VF page I'd like to center a content of a grid column. Code: <apex:page> <head> <apex:slds /> </head> <body> <div class="slds-grid ...
1
vote
2answers
5k views

Lightning datatable issues

I am implementing lightning:datatable with pagination and save all the selected records at once i am facing two issues: if I select row2,3,4 in the first ten records and click next it automatically ...
1
vote
1answer
1k views

How do you overwrite the slds-checkbox_faux checked css

I am wanting to overwrite the css a toggling checkbox when checked. .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox-...
1
vote
1answer
52 views

Is it mandatory to name attribute as recordId - Build Flexible Apps with Visualforce Pages and Lightning Components[Lightning trailhead]

I working on 'Build Flexible Apps with Visualforce Pages and Lightning Components' trailhead module and I was on 'Create a SimilarProperties Lightning Component' there is one statement comes up which ...
1
vote
1answer
263 views

SLDS Grid layout 40-60 ratio

There is a need of designing a layout using SLDS grid system. We have to divide the entire width in 40% - 60% ratio. I am able to divide in 5:7 ratio like below https://pastebin.com/7TYyBMLa How can ...
1
vote
2answers
2k views

How to define dynamically background color in Lightning

In Lightning is not possible to access CSS Style and modify css properties like background color. In my case I need to change CSS Background color style based on custom record field value. I am ...
1
vote
1answer
832 views

Change parent tag class

I have lightning component with below code. I trying change class on aura:id="xcont" when i click a checkbox. background-silver to background-red <div aura:id="xcont" class="slds-button slds-...
1
vote
2answers
354 views

Spinner display getting delayed based on number of records being displayed on the current component

I have 2 lightning components. I am displaying list of parent on the first component. when I click on the any specific parent I am displaying all associated child for that parent in the 2nd component. ...
1
vote
4answers
1k views

Single Column Lightning Home Page?

Is it possible to create a Single column lightning home page? On Lightning Home page creation, the only option is the standard two column - but on individual pages you can choose single column. I'd ...
1
vote
3answers
3k views

Remove base styles from lightning component framework to use LDS

Adding a ui:button in Lightning Component Framework results in classes uiButton--default and uiButton being added. In order to use Lightning Design System, I need to remove these classes (or override ...
1
vote
2answers
458 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 ...
1
vote
1answer
236 views

Custom button or link in lightning tree

I want to add plus(+) and minus(-) button/sign at every level of lightning tree to add or delete item at particular level, is there any way to do so?
1
vote
1answer
328 views

For lightning:input can I set my own Id attribute?

I am using aXe tool to do accessibility testing and it is giving me a red flag because it doesn't like the current value in the id attribute, that is set to "input-1". Question is how, if possible do ...
1
vote
1answer
47 views

Why is my Lightning:Tree component not displaying anything when fed Valid JSON?

Today I have been attempting to make a lightning:tree that accurately reflects a nested list of custom objects, and it feels like I am most of the way there, but can't quite get the tree to actually ...
1
vote
1answer
39 views

Can we add Non-Black field validation in js when creating record using force:createRecord

I have created a component which has a button. onclick event on the button navigates to record create page . I have used force:createRecord for this. However I want to add a validation in js that one ...
1
vote
1answer
658 views

Wrap components in lightning

I am trying to wrap components in a Salesforce Lightning tab. It seems like a fairly simple task. I want items (which are dynamically created lightning components) to be arranged in (for example) four ...
1
vote
1answer
254 views

Lightning layoutItem not rendering

Hi I'm creating a custom lightning page template. i need a header, left sidebar, 3 middle components, a right sidebar. the problem is that two of my layoutItems are not rendering properly, just NaN is ...
1
vote
2answers
3k views

How to call a Lightning page from a button of a custom component

Is it possible to launch a Lightning page that was created in the Lightning App builder (composed of two sibling components) from the button click of another custom component? Any help would be ...
1
vote
1answer
108 views

Can we add help textf for Lightning:progressIndicator steps

any help or alternative to add helptext in lightning:progress indicator bar would be helpfull.
1
vote
2answers
4k views

Lightning:inputField does not show picklist values based on record type

Has anyone been able to successfully show picklist values based on record type using lightning components? We have 4 record types and for some reason all record types is defaulting to the RSO record ...
1
vote
1answer
278 views

Lightning component for search with popup

Are there any built-in lightning or ui components that represent a search bar with popup that contain the search results and pops up every time user types something in the search bar? UPD: if you go ...
1
vote
1answer
419 views

Display data in stacked form in lightning component

Hi I want to display data in stacked form i.e one after the other in 2 coloumn format. I am using below code for that. But I am getting spaces between the data as shown in attachment; if data is more ...
1
vote
1answer
680 views

How to iterate records using SLDS

I am trying to create a datatable using the SLDS but when I use Apex DataTable I cannot get the column names which are <apex:facets> to get in the correct style slds-text-title_caps Here's my ...
1
vote
1answer
287 views

How to change customize theme, background color in Visualforce that using Design system?

I have completed the tutorial applying Design System in Visualforce. I read about design tokens but I still don't understand how we can change the theme in Visualforce. I am not able to find an ...
1
vote
1answer
274 views

Lightning component won't compile because of false dependency report

I originally had two design parameters and their corresponding attributes in my component. Afterwards, I deleted both the parameters and attributes, but, after doing so, I couldn't compile my code ...
1
vote
2answers
526 views

Any way to pass parameters to Global or Object Specific Action Components from a button click?

Assume we have a Lightning component. <aura:component implements="force:lightningQuickAction" > <aura:attribute name="test" type="String"/> Display dynamic text passed on button ...
1
vote
1answer
3k views

Passing values from controller in Json format to components

I am getting value in JSON format in a controller function and want to set it to attribute in it's associated component. controller function userFeedItem: function(component, event, helper) { ...
1
vote
3answers
4k views

Can we modify/remove global header section from Lightning Pages

I'm just curious in case we can modify or remove the global header section from a lightning app page. Does anyone have any pointer for tweaking this section?
1
vote
2answers
701 views

Issue with slds grid with size

I'm building a VF page with SLDS including slds-grid and slds-size. What I'm trying to do is to have 2 columns with sizes of 8-of-12 and 4-of-12. Within the 8-of-12 colomn I want to display Apex:...
1
vote
1answer
1k views

Lightning design system for lightning component : question about icons

I'm creating a lightning component using the Lightning design system. I learned that I could add the SLDS design to a lightning app with that : extends="force:slds". This way all the element in my ...
1
vote
1answer
967 views

Using apex:slds tag, styles do not show [duplicate]

I am trying to convert from using SLDS as a static resource and use the <apex:slds/> element in a visualforce page instead. I am on a sandbox that is on Spring '17 and the page is version 39.0. ...
1
vote
1answer
131 views

Lightning design system how to find scoping class of static resource

So... going through the trailheads, last month, I've already created the static resource of the SLDS. However in a new trailhead I'm back to the design system. In this I'm required to update the '...
1
vote
2answers
228 views

What does “brand” mean in SLDS and when is it appropriate to use slds-button--brand buttons?

SLDS (Salesforce Lightning Design System) buttons have several styling options options including the brand (blue) option. From a cursory look at Lightning Experience, the "Save" button is normally ...
1
vote
1answer
4k views

Lightning Popovers Not Displaying

I am newbie in salesforce and lightning too. I want to show tooltip on image which is coming as iteration of records. For the time being this will remain same[static] on all images. I created below ...
1
vote
1answer
147 views

jQuery(elem).index() doesn't work in LEX? How can one get index of element in Lightning?

I get used to use jQuery when I develop Visualforce. Looks like jQuery doesn't work with Lightning. I am trying to get index of < tr> element clicked in table element using Ligtnening. I would ...
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 ...
1
vote
1answer
2k views

Lightning component linking salesforce lightning design system

I'm trying to use the lightning design system into a lightning component so I can use the grid system. My problem is for installing the lighning design system : I went here and downolad the "Design ...
1
vote
1answer
2k views

Can I upload this SalesforceSans font as a static resource and then call it in a VF page?

I've downloaded the Lightning Design System and I'd like to just upload the SalesforecSans font to my dev org for now, preferably as a static resource. Is this possible? How would I then call this ...
1
vote
1answer
47 views

How to escape lightning CSS scoping

I have a component called basic, with the following in it's css file (basic.css) td { background: red; } The rendered CSS comes out like td[c-basic_basic]{background: red;} Is there a way to ...
1
vote
1answer
123 views

Setting time ranges in lightning:input type=time

Is it possible to set the time intervals when using lighting-input tag of type="time"? The default gives intervals with 15 minutes (12:00, 12:15, 12:30... etc). But I need it to set the intervals to ...
1
vote
1answer
1k views

LWC Composition for fields inside a record-edit-form

I have a lightning-record-edit-form with multiple lightning-input-field. I'd like to put some of the input-field into a child component, say childComponent. The code is attached at the end. However,...
1
vote
1answer
415 views

Lightning:recordForm custom buttons

Is it possible to include custom buttons on Lightning:RecordForm or any of its variations ? Specifically a "save and new" button. If this is not possible, should the alternative be to create a ...
1
vote
1answer
263 views

How to disable button on parent record in lightning:treegrid component

I am newbie to lightning and I am having treegrid lightning component in which I have button column. My requirement is to disable or hide the button on parent record. Below are my code. I am not sure ...
1
vote
1answer
77 views

How to toggle classes off one element and on another after onclick

I am creating a custom menu using the Salesforce Lightning Design System Global Navigation with sub tabs <div class="slds-context-bar slds-context-bar_tabs"> <div class="slds-context-...
1
vote
1answer
361 views

Lightning OverlayLibrary Background Color for Header and Body

I just want to modify the background color of whole header section and body of my lightning overlayLibrary. here is my code : Popup Component <aura:component implements="forceCommunity:...