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.
888
questions
0
votes
0
answers
46
views
Why I am getting padding of 2px in my Lightning-radio-group element's all the radio button except first radio in LWC in salesforce?
CSS:
.vertical-radio-group {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: var(--slds-c-lightning-radio-group-spacing-inline-start, 0rem);
}
.slds-radio {
...
0
votes
1
answer
36
views
How can I print object related object fields in lwc with wire and apex
public with sharing class retriveaccndcon {
@AuraEnabled
public static list<account> getrecords(string parentId)
{
return [select id,name,(select Id,FirstName,LastName,...
1
vote
1
answer
56
views
LWC: Making child cards grow with each other
I'm very new to all of this, so apologize if this is obvious to others. I have four cards that I am using in a parent lwc. The content of each is different, but I want all of the cards to be the same ...
- 11
1
vote
0
answers
234
views
Change text color in header of Lightning Data Table (LWC)
I am trying to change the text color in a lightning data table (LWC), and I'm not having any luck. I've read several posts about changing the background color of the headers in a lightning data table, ...
- 9
0
votes
1
answer
56
views
Lightning Layout scrollable is breaking the table and showing only few columns
I am working on the Custom product family selection LWC component, I added the rows and columns in the lightning layout using table. For 4 fields the table is showing all the rows and columns, but if ...
- 15
1
vote
1
answer
79
views
lightning-progress-indicator not rerendering if the total step count is changed
parentCmp.html
<template>
<c-progress-cmp total-steps={currentStep} current-step={currentStep}></c-progress-cmp>
<template if:true={showFirstComponent}>
<c-...
-1
votes
1
answer
257
views
I am getting deployment error while calling my apex class in LWC, Unable to activate Apex Language server
apex class
global class UserLoginController {
@AuraEnabled
global static String login(String userName, String passWord){
String homeUrl = ' https://nttdata-32c-dev-ed.my.site.com/s/';
...
0
votes
2
answers
172
views
Increasing thickness of Lightning progress bar
I have an requirement where I need to increase the thickness of progress bar to 1rem. Salesforce has provided progress bar as below:
<lightning-progress-bar value="50" size="large&...
0
votes
0
answers
23
views
How do I make three divs within a lightning layout item evenly space out to take up the entirety of the available space?
How do I make my three divs within this lightning layout item evenly space with the logo at the absolute top of the layout item and the button at the absolute bottom?
Right now the text displays right ...
1
vote
0
answers
81
views
How to hide the rendered lines above each row in a datatable?
I am implementing a nested datatable within a column of a another datatable. This datatable is supposed to have no borders around the rows. My code is based on Datatable with no borders:
Parent ...
- 186
0
votes
2
answers
781
views
How to display toast message in multiple lines using LWC
I need to show toast message in separate lines using LWC.
Like this,
I tried with '\n' and 'br' tag but it is not working.
<div>
<lightning-button label="Toast Msg" variant=&...
- 13
0
votes
0
answers
46
views
Lightning Table Fixed Headers will not center
I am referencing below article in my code, applying fixed headers. When I do this I'm not able to center align the column headers or change the height of the header row. I have tried class="text-...
- 75
0
votes
1
answer
84
views
slds-backdrop not covering the input fields on the screen
I am trying to add a lightning spinner, and I see the following behavior. The Input fields are not greying out when the spinner is on the screen
Below is the code :
CSS :
.loadingSpinner{
position:...
- 107
0
votes
1
answer
298
views
pagination in tiles in LWC
I wanna create UI Like this, I wanna add Pagination in Tiles using LWC is it possible? and this Title of section is accordion it should be expandable/collapsible, when I click on > arrow, the below ...
- 3
-1
votes
1
answer
451
views
How to change border-style to none in <lightning-input> LWC
I am trying to change the border style to none of a LWC Lightning-input tag. How should I do it?
0
votes
1
answer
2k
views
How to show lightning layout item in 2 columns in LWC?
I created visual picker LWC component, the component is working as expected but unable to change the items to 2 columns instead of single column. I tried to use size="6" class="slds-...
- 247
0
votes
0
answers
232
views
Resize lightning-input-field when it is a rich text field using the cursor
I have this in my LWC component
<lightning-record-edit-form>
<template for:each={draftableFields} for:item="field">
<lightning-layout-item key={...
- 1
0
votes
0
answers
355
views
LWC Quick Action component can be opened as a modal on click of a lightning-button
I have a lwc modal component which opens on a quick action in Account object. Can I call that component using a custom lightning-button from another custom lwc component in Account lightning record ...
- 3
1
vote
1
answer
133
views
Related record ID in Aura Component with out server side controller (apex)
I am trying to create a Aura component that fires the create new page with the default values. I am calling the Aura Component from the Quick action where I can get the the record ID but how I can get ...
- 130
-1
votes
2
answers
159
views
onchange event not working on Salesforce ios app and Safari browser
We have a Salesforce application developed with LWC and published on Experience site. We also launched this application in android and iphone. The application is working fine in Windows Desktop and ...
- 407
1
vote
1
answer
248
views
LWC not creating record on click of a button
My requirement is something like this:
There is a create account button which creates a new account based on 'Name' input field in the lightning card.
Once I click on this button, another button to ...
- 29
0
votes
0
answers
263
views
How to use lightning-button-menu and lightning-menu-item instead of ul and li items?
I have been given a requirement where I need to use lightning-button-menu and lightning-menu-item instead of ul and li. I have been given the following reference
<lightning-button-menu class="...
- 109
-1
votes
1
answer
306
views
LWC: Alignment lost when using Name in Lightning-record-edit-form
I have a requirement to mimic the create contact form in LWC. For this, I am using lightning-rec-rd-edit-form. When I use Name field, it consumes 4 rows as it has Salutation, First name, Middle name, ...
- 429
0
votes
1
answer
61
views
Lightning Design System SVG example doesn't show up if included in a static resource
We would like to implement an LWC that would use the https://www.lightningdesignsystem.com/components/illustration/#No-Task no task SVG image.
<template>
<div class="slds-...
- 16k
1
vote
1
answer
397
views
How can I add a transition to a lightning utility icon?
I need to add a transition to a lightning utility icon <lightning-icon>. I can't find any docs or solutions to this. Does anyone know how or does anyone have any good articles or docs relating ...
- 21
0
votes
1
answer
130
views
LWC on Heroku with lightning design system and lightning base components
I want to deploy a lwc to heroku and use the lightning desing system and lightning base components. I tried a lot of different approaches I found online but non of them worked. As described here at ...
- 3
0
votes
0
answers
294
views
How to conditionally render 'checked' button in Lightning Visual Picker
I have two separate, but related questions. I am trying to conditionally render attributes in the lightning visual picker to be checked. I want the first enabled button to be checked by default. I ...
- 3
0
votes
1
answer
1k
views
How to retrieve Data on selecting combobox value in LWC?
I have try to create custom list view on Account but I have faced some issue while I am selecting the combo Box value How to retrieved apex class data ?
Please help me to solve this issue.....
and my ...
- 27
3
votes
2
answers
3k
views
Activities standard component UI is changed with spring 23 release
We have standard activities component on record page. The UI for that component is as below for scratch org which does not yet have Spring 23 release:
As salesforce spring 23 release coming we have ...
2
votes
1
answer
234
views
Lookup CSS dropdown-alignment implementation in lightning-datatable
I'm currently having some issues with the lookup implementation that is being used within a lightning-datatable implementation.
The lookup bar is being cutoff, and instead pushes the entire table ...
- 105
0
votes
0
answers
63
views
Lightning Design System 2x2 table Size with nested table
I'm creating an aura application and wanting to build a table of 2x2 with nested tables as can be seen in the below image.
I have the following codes and it doesn’t appear as expected.
<aura:...
- 123
0
votes
0
answers
72
views
Thin border renders unevenly in LWC (Resolved)
I'm curious why does lightning renders the thin border of table cells uneven while in code the border-top and border-bottom was set to 1px dotted grey
I hope someone can help. Thanks
- 1
0
votes
1
answer
272
views
SLDS Page Header Object Home with List Box
I'm trying t create a custom lightning aura component that looks like below screenshot. I've used the Page Header Object Home in SLDS, as well as the listbox pattern from the combobox or picklist SLDS....
- 484
0
votes
1
answer
555
views
How to pass Dynamic object query in lightning Data Table in Aura Lightning?
I wanted to add the dynamic object query result in Lightning datatable in Aura Lightning ?
Data comes in console log but how to add in lightning data table ? Please help me.
Code:-
public class ...
0
votes
0
answers
609
views
I want to show lwc datatable in a nested table row which is being iterated by a parent component, but my table is coming in column instead of row
I have created 3 components, 1. grand parent component :
in that component, I am adding a table header and the view and then in the second component my table rows are coming via lwc iteration and in ...
1
vote
1
answer
2k
views
Remove bottom border from Lightning Card?
I have a Lightning Card in a Tabset and I cannot remove the bottom border. Below is the code (I have removed the other tabs for simplicity).
I needed to use a CSS to display the Border in the Card - ...
- 373
1
vote
1
answer
311
views
How to style lightning grid and icon like this photo?
I am trying to get a lightning grid with lightning cards similar to this example below. I have my wireframe and the actual image. It seems that there can be more cards you can scroll through using the ...
- 27
0
votes
3
answers
3k
views
how to create lwc component to create new record for custom object ? only the name field is saving but other fields are not saving
html code
<lightning-card>
<h3 slot="title">
<lightning-icon icon-name="standard:record" size="small"></lightning-icon>
...
- 1
0
votes
2
answers
1k
views
lightning-input type=datetime [Unable to set / consider the locale time for the validation as per the Locale of the User]
.html snippet (LWC Component)
.js snippet (LWC Component)
import { LightningElement, track } from 'lwc';
export default class DateTimePickerLightningInput extends LightningElement {
@track today;
...
-2
votes
1
answer
339
views
lightning icon size is changing
I am using lightning-icon in a tile.But for a sentence ,the size of the icon is changing.(icon is not in round shape).
[
2
votes
1
answer
692
views
Final check progress-indicator lwc
I'm trying use the lightning-progress-indicator of lwc.
I want show the final check if step is finished
<lightning-progress-indicator class="path-checks" current-step={...
- 196
2
votes
1
answer
67
views
How to replicate a custom button/VF in Lightning
We migrated to Lightning and there is a custom button on the Opportunity page that loads a Visualforce page and I need to get it replicated to work in Lightning. I am not a developer nor do I have one ...
- 311
2
votes
1
answer
3k
views
Creating Multiple Data Table for list of Records using LWC
Can anyone tell me how do I create multiple data table using single lightning data table in my html and iterating over with template for each with the list ?
I am looking at something like this:
...
- 45
1
vote
0
answers
338
views
How to add onclick event on Path(Path from Salesforce Lightning Design System)?
I am working on a Lightning web component and used path from Lightning Design System to show the value of the picklist field. I want to the change the value of picklist field by clicking on the other ...
- 153
1
vote
1
answer
5k
views
How to get the close icon(cross sign) at top right corner of modal in LWC?
I am creating a modal and copied the code of modal from Salesforce Lightning Design System. Here is the code :
<section role="dialog" tabindex="-1" aria-modal="true" ...
- 153
2
votes
0
answers
31
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 ...
- 2,376
0
votes
1
answer
335
views
Is there any way to disable multi select option in Lightning-dual-list box?
I wanted to select only one option at a time in Lightning-dual-list box.
- 37
1
vote
1
answer
210
views
force:recordData is not firing on record update
I have a requirement that when Opportunity stage goes from stage A to B (which happens automatically using Flows when user fills few required fields on Opportunity and hit save.), this stage movement ...
1
vote
0
answers
696
views
lightning-quick-action-panel remove scroll using css LWC
I am using lightning-quick-action-panel in the html and the component loads on a button click and it contains a data table.
There are 2 scrollbars present and I want to get rid of one .When I ...
- 11
0
votes
0
answers
63
views
<div> won't display in c-section-header
I am trying to add helptext underneath the header of a page. For some reason, when I add the div with slot="testSlot" in the below code, the div doesn't even render.
Screenshot of what I ...
- 115