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
0
votes
0answers
34 views

Display View icon inside an encrypted lightning-inputField and on the click of that icon, unmask all the encrypted values in LWC

I have a requirement where I need a View icon inside lightning-inputField in a Lightning-record-edit-form. This field will hold masked values. When user clicks on the view icon, it should unmask the ...
0
votes
1answer
3k views

Add bold style to last row in Lightning Data table

I am using lightning:datatable tag to display set of rows in the UI. A few columns are numeric data. I need the last row to be summarized values of all the data set. I don't find any standard ...
1
vote
1answer
37 views

Show List of Account Records and sort them according to selected button value (Multiple button can be clicked or selected)

I want to Show Records on the button Click Below Code is Working fine but i want to add Multiple button click check without Deselecting previous Button. In the above Picture if i select Hot it will ...
1
vote
1answer
825 views

Arrange a list of Data in Column and Row format using SLDS

I have a html file where I am trying to display some data in a better way, like this: Job Details | Value _____________|__________ JobType | Future ________________________ Status | ...
0
votes
0answers
338 views

How to keep the width of the lightning:input responsive in Lightning Component

I have a lightning:input field inside lightning:layoutItem. My requirement is to increase the width of the textbox. So,I am using custom CSS where I am setting the width to 55rem. But looks like the ...
2
votes
4answers
5k 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?
3
votes
1answer
1k views

Render VF Page as PDF with LDS

I have a lightning component that I need in the form of pdf. Since we can't do this in the lightning component. I have to switch back to VF Page for pdf generation. Looks like when we use SLDS in vf ...
0
votes
1answer
671 views

Unable to Insert Record with the Record Type - LWC

I am new to LWC, i have few RecordTypes for the Service object, i am trying to insert the record with the record type (Mobile Service Record Type), but with the below code record is getting created ...
1
vote
1answer
54 views

apex:slds not work in Classic Console

Please see follow codes: <apex:page sidebar="false" standardStylesheets="true" showHeader="true" docType="html-5.0"> <apex:slds /> <table class="slds-table slds-table_cell-buffer slds-...
0
votes
1answer
229 views

how to set width for a custom lightning component in UI

I have created a custom lightning component, but on the UI it overflows and not able to set the width. Can anyone please let me know how to do this? I need to display this primary contact as other ...
0
votes
3answers
4k views

Change background color for lightning:tab

How can I set background color for selected tab in lightning:tabset <lightning:tabset> <lightning:tab label="Item One"> Sample Content One </lightning:tab> <...
4
votes
2answers
10k views

Scroll Page to top onClick of a button in Saleforce1

I have a problem scrolling to the top of a lightning component page in Salesforce1. I have tried using window.scrollTo(0,0); Added the below attribute in the button tag oncomplete="window....
1
vote
0answers
33 views

Contact lookup option is not displaying any records in lightning custom component

I have a component which creates quote by fetching information from opportunity. Here i have lookup to accoutn, contact, opportunity, billto, postto. Account and opportunity lookup is working fine and ...
0
votes
1answer
393 views

slds-table css styling no longer makes header row grey? Doesn't match documentation

Edit: After testing some more, I've determined that this issue of the mysteriously white Data Table header occurs only when dropping the component into a Lightning Application with extends="force:slds"...
0
votes
1answer
34 views

If condition fails but the body statement is executing in components apex controller

I have written a if condition to validate input ofpricelist to be choosen as USD if posting country is not india and selling country is india. But even though my if condition is failing it displays ...
0
votes
1answer
17 views

trying to validate data in component and throwing error on component

I am trying to validate data that is if posting country is other than india and selling country is india then users has to compulsorily choose USD as a pricelist. Have written a logic something like ...
0
votes
1answer
47 views

unable to get field value from database.query method

I am using database.query method to retrieve 2 fields from account. But when i tried to fetch get the values of that fields i am getting null value. Can someone help me. Here totalValueFieldName is ...
0
votes
1answer
28 views

stop displaying default message after displaying custom component UI to create record

I have a default message as loading which has to be displayed until its been navigated to custom UI page of component. I havd tried using var dismissActionPanel = $A.get("e.force:closeQuickAction"); ...
3
votes
2answers
248 views

Salesforce Lightning Enhanced Notes in Component

Is it possible to open out of the box "Salesforce Lightning Enhanced Notes" editor on click of a link / button so that we have more control over our lightning UI screen. If we see on below screenshot,...
3
votes
1answer
2k views

Animate custom refresh lightning-button-icon LWC

I want animate a lightning-button-icon as the standard Salesforce refresh button in LWC. I've already seen a related question but the answer was not conclusive, at this point I don't know if it's ...
1
vote
1answer
142 views

How to get rid of the column sort on a related list

Is it possible to get rid of this related list column sort? The reason being is that if the related list records are being sorted by a specific column then the sort button in Classic does not work in ...
0
votes
2answers
143 views

error - Uncaught Action failed: c:qf_Questionbuilder$controller$SelectLookupItem [Cannot read property 'config' of undefined]

i am getting the following error. Uncaught Action failed: c:qf_Questionbuilder$controller$SelectLookupItem [Cannot read property 'config' of undefined] This is when my helper tries to refresh the ...
0
votes
0answers
210 views

How to handle when Lookup defaultFieldValues parameters for e.force:createRecord are null

If the record has the RecentAccount__c lookup field populated then the new record creation modal pops up perfectly without error. Otherwise, if the record does not have the field populated it throws ...
2
votes
3answers
3k views

How to code 'scoped tabs' in Lightning Design System?

I want to use the 'scoped tabs' component in a demo community on the Napili template. Example of 'scoped tabs' from LDS (Lightning Design System) at https://www.lightningdesignsystem.com/components/...
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="...
1
vote
2answers
3k views

Creating a tab on a lightning component using aura and lightning design system

Trying to use the css from https://www.lightningdesignsystem.com/components/tabs/#flavor-default to create a tab on my component. In the documentation they say i need to toggle classes on different ...
0
votes
2answers
7k views

How to create a link to the record page using lwc?

I am using LWC and would like to create a link to record's detail page when using the <lightning-tile> element. Question: How can I do this using the href attribute? I have tried the ...
2
votes
1answer
3k views

Unable to use SLDS Icons in Lightning Web Component

I am developing an app and I need to add SLDS icon with custom color (i.e. green or blue) to the UI. Which is why I can't use <lightning-icon> component because you can override it style. Thus ...
2
votes
1answer
751 views

What is the path to Lightning SVG icons in a sandbox?

So far I have found and tried three paths, but none of them is resulting in an icon being displayed. I am using this code, provided by Salesforce: <div class="slds-form-element"> <label ...
0
votes
1answer
502 views

slds-size Not Working Properly For All Elements

I have the following HTMLin a Lightning Web Component: <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_1-of-3 slds-p-bottom_small"> <div style="font-...
3
votes
1answer
51 views

How to use new slds charts in lightning componets

I could see that, salesforce release new feature in SLDS charts under Design Guidelines. https://www.lightningdesignsystem.com/guidelines/charts/ I cannot see any explanation of how we can use these ...
-1
votes
2answers
460 views

How do we update the value to the specific row in LWC? and also what if I do mass update for all the rows?

<template for:each={myList} for:item="foreCast" for:index="indexVar"> <tr key={foreCast.id}> <td data-label="Account Name"> <div class="slds-align_absol[![...
0
votes
1answer
29 views

How to prevent aucomponent table from growing in size so that it changes the size of the component?

Hidden Component 3 is a table (not lightning data table.) It is fetched with some data-- but when the text gets too large (even with truncation), the entire component will grow with the table. ...
6
votes
1answer
6k views

Cannot get attribute value from <a> tag when <img> is an element of it

I'm facing a wierd UI issue when I use- <a href="www.someLink.com" onclick="c.controllerFunction" data-attriVal="abc"> <img src="resource/image.PNG"/> </a> In my lightning ...
6
votes
2answers
7k 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>...
6
votes
2answers
405 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 ...
2
votes
1answer
435 views

Getting input field type from lightning:input tag

I want to get input field type information in my lightning javascript controller. How is that possible? For ex: <lightning:input type="number" value="{!v.value1}"/> <lightning:input ...
0
votes
1answer
355 views

Error in Lightning Web component :afterRender threw an error in 'c:lightning' [Cannot read property 'data' of undefined]

Below is my code for Lightning Web Component: HTML File: <template> <template if:true = {files.data}> <template for:each={files.data} for:item='file'> <...
2
votes
1answer
818 views

Spinner with a delay to disappear!

I created a component where I use lightning Spinner a lot, especially when I have to search for information in the Salesforce database or after some dynamic procedure on the screen, like a calculation ...
0
votes
1answer
60 views

Error when trying to set values for <force:inputField

I'm trying to set the default value of lookup for I'm getting the error when I try to set value: var value = [{ type: 'Account', id: "0014343234543", label: "Related To" }]; component.find("...
0
votes
1answer
121 views

Nested Checkbox in Lightning Component

I need to build nested checkbox in lightning component, like the below image. I tried to achieve this using ul and li tag but its not appearing like the image: <lightning:layoutItem size="2"> ...
0
votes
0answers
361 views

Responsive Lightning design component

I have an lightning component and I am Using it in two different record detail page ,One on main page and other in small side bar. My component is compatible with the main bar,But when I placed my ...
0
votes
1answer
66 views

Fix the Lightning component on app page

I need to fix the position of 1st component on top & 2nd component at the bottom of page.Both shouldn't be scrollable (As i want them as buttons). If any other component is in between that should ...
0
votes
0answers
55 views

LDS Multiselect picklist

I am trying to use the following code from the Lightning Design System documentation. I am getting SVG errors. Can someone tell me how to resolve this? Can I use something other than the svg code?
6
votes
3answers
5k 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 ...
2
votes
3answers
4k views

<aura:html tag=“style”> not working after summer 19 release

I applied the below code to increase the width of quickAction lightning component <aura:html tag="style"> .slds-modal__container { width : 60% !important; max-width : 80% !...
4
votes
5answers
7k 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 ...
1
vote
1answer
363 views

Unable to display action lightning design icon in visualforce page

I'm trying to use one of the action icons from the lightning design system on my visualforce page. But I'm getting the icon color in black & white. I have tried to fill color from the CSS too but ...
0
votes
2answers
236 views

Is it possible to show action button in lightning outside of dropdown icon?

Currently buttons are visible within this drop down icon Is it possible to show these buttons directly like this ?
3
votes
3answers
256 views

Not able to add dynamic style based on device

I am trying to add dynamic style one of lightning layout, the code goes till the device identification yet it doesn't apply the proper style. Here is my code:- <lightning:layout aura:id="...

1
3 4
5
6 7
17