Questions tagged [slds]
Salesforce Lightning Design System (SLDS) is a collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem.
618
questions
0
votes
1
answer
27
views
Place lightning-input message next to element
I'm using this one to display
<div class="slds-grid slds-wrap">
<div class="slds-form-element">
<label class="slds-checkbox_toggle slds-grid"&...
- 839
-1
votes
0
answers
20
views
Cancel and update StageName for opportunity lwc
i want when i click cancel close modelpopup and update opportunity status to closed
import { LightningElement, api} from 'lwc';
import OPP_OBJECT from '@salesforce/schema/Opportunity';
import OPP_ID ...
0
votes
1
answer
58
views
salesforce-ux/design-system lib is not displaying slds icons in lwc oss
I am using LWC oss framework to play with lightning-base-components npm package. I have used 'salesforce-ux/design-system' to use SLDS.I could use base components as lightning web components with SLDS....
0
votes
1
answer
151
views
How do I expand a table column that has a LWC Component inside
Trying to figure out a way of getting the expandable section below the main row - expand to be full width of the table. I am having issues with it just fitting within the first column.
Are there ...
0
votes
0
answers
36
views
Documentation for slds colour and background colour classes like slds-text-blue
I am new to salesforce design system , I have never used css classes in salesforce before
I am trying to find proper documentation for slds colour classes but I didnt find exact one
what I find is ...
- 11
0
votes
2
answers
176
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
55
views
LWC - Css styling has problem with :not(:first-child)/:not(:first-type) and ::before
I'm building a Salesforce look alike path. Because the way data display and looping in the component so I cannot use Path from lightning design system.
HTML code:
<template>
<div class=&...
- 97
0
votes
1
answer
44
views
Invocable method icon not visible
I defined an invocable method with an SLDS icon like this:
@InvocableMethod(Label='Clone Opportunity' IconName='slds:action:clone')
Today I noticed that the SLDS icon is not displayed in the Flow ...
- 2,272
0
votes
1
answer
483
views
How can you style the lightning-output-field lwc component?
I am trying to style the output of a lighting-output-field component.
<div class="slds-grid slds-gutters">
<div class="slds-grid slds-size_1-of-1">
<...
0
votes
1
answer
89
views
Remove extra space from Modal
I want to remove this extra space coming into my modal. How to remove this? I am using the standard slds modal and browser zoom @100%
Inspecting it shows slds-modal__content class is having height: 90%...
- 361
0
votes
1
answer
493
views
How to create a custom Scrollbar for a particular section in LWC?
I am new to LWC and SLDS Designs. I have a certain design of a scrollbar I need to create but unable to get how to get this specific design. I need the scrollbar at the greyed out section. The Values ...
- 109
0
votes
1
answer
215
views
Why does my lightning web component render differently in production?
I have created a Lightning Web Component in a sandbox org (Summer 23 patch 10.1) and deployed it to my production org (Summer 23 patch 9.6) via a changeset. In the sandbox org, the layout looks the ...
0
votes
2
answers
26
views
SLDS class for different opportunity stages
I am looking out for slds classes for different opportunity stages.
Specifically I'm looking for class which shows 'closed won' stage
And closed lost stage like below
The class below I'm using is
'...
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
0
answers
65
views
Styling inside datable header, in LWC Component
I have a datatable LWC element thatneeds to be responsive. So here it is in desktop
an here in a cellphone screen size
HTML (just the datatable)
<lightning-combobox
name="...
- 109
0
votes
1
answer
103
views
Entire Section using slds-section with the toggle is clickable
When I click on anywhere over the section of slds-section, the toggle turns on/off.
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-...
- 107
0
votes
1
answer
149
views
How to get the body of a Docked Composer to vertically scroll?
In the Docked Composer blueprint there is no example of how to introduce vertical scrolling (slds-scrollable_y) into the body section (slds-docked-composer__body). This is needed when the fields ...
- 135k
0
votes
0
answers
25
views
lwc generating class 'homeDesktopTemplateHeaderThreeColumns' putting min-width css property
<template>
<div class="listContainer">
<template if:true={products.data}>
<template for:each={products.data} for:item="product">
<div key={...
- 1
0
votes
0
answers
275
views
How to style a path element such that it can be used as a standalone LWC?
I am trying to create a custom Sales Path for the Opportunity object and I'm trying to create a LWC standalone, part of the overall Path LWC.
The component structure I'm trying to achieve is:
...
- 170
1
vote
0
answers
208
views
Font size of the slds-page-header title
With the help of the Page Header Component Blueprint I created an LWC that mimics the design of a standard related list. The only diference is, that the text of the Page Header Title is just slightly ...
- 21
2
votes
1
answer
327
views
How to change disabled button text and background color using styling hooks?
I need to apply a background color to a disabled button, but the following did not work and no error is shown in the browser's console.
Question
Using styling hooks (mentioned here), how can I change ...
- 285
0
votes
1
answer
78
views
I'd like to alter the height of slds-modal__container dynamically from JS
I have a component with 3 subcomponents. Only one component is visible at a time. The component simply progresses from one screen to the next. One of the screens is longer than the others. I'd like ...
- 21
1
vote
2
answers
630
views
How to remove column adjuster in Lightning Data Table?
I have a Lightning Data Table component in my Lightning web component that displays data in several columns. By default, the data table displays a column adjuster in the top right corner of each ...
- 58
1
vote
1
answer
1k
views
Can We Apply Custom Colors to a ShowToastEvent?
I need to drop a simple LWC onto an existing Lightning Record page which just queries for some specific conditions between parent and child data, and if conditions are met, displays a toast message at ...
- 3,514
-1
votes
1
answer
310
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
1
vote
1
answer
665
views
SLDS Grid evenly spaced with no overflow
I can't seem to achieve what I am looking for.
I basically want to have a slds-grid container that will create evenly spaced child <div> containers (slds-col ?) and not shrink or grow depending ...
- 2,376
0
votes
0
answers
93
views
Hide the sidebar on mobile devices using the slds classes in Experience Cloud
I need to build a custom content layout that has a sidebar on the left side that takes 3/12 of the whole page. I want the sidebar to disappear when the size of the device is reduced to a mobile size.
...
- 25
0
votes
1
answer
411
views
Using CSS styling hooks on lighting datatable rows
I want to increase the height of the rows in the lighting (I also want to change the spacing and add shadows)According to the documentation here. But I cant seem to target the row element of the ...
0
votes
0
answers
134
views
Should we use Salesforce lightning design system?
One of our components got distorted due to Spring 23 because of an upgrade did by Lightning Design System. In Visualforce world, it is a general recommendation not to use Salesforce built in CSS. ...
- 1,331
0
votes
2
answers
249
views
Center aligned grid with content left justifies
I have a grid where we have 4 columns like below:
The problem is that I wan't the 4th column to start from absolute left of the center aligned grid. How can I achieve this?
Below is the code:
<div ...
- 612
2
votes
1
answer
370
views
Using lightning-card to achieve a similar look to Opportunity Related Lists
Is it possible to use the lightning-card to emulate the look of Related Lists on the Opportunity Lightning Record Page? For example...
In my case, I don't even need the action buttons - only a header ...
- 519
0
votes
0
answers
557
views
Placing images in LWC using slds
I have been trying to work on some images to be placed in a particular pattern. The images appears to indicate about the record. If the record's field abc = true then I display images 1-8 below. If a ...
- 3,152
0
votes
1
answer
258
views
Need Help Finishing Code to Change Aura Button Color for Flow
I am following this Salesforce article to modify the "brand" button variant with a custom color, but it will not use my css styling changes. The goal is to use it in Screen Flow, and also ...
1
vote
1
answer
300
views
LWC datatable with custom picklist alignment
I have a custom picklist that in an LWC datatable. I would like to eliminate the space above the picklist.
Aligning the picklist field has been challenging:
custom picklist:
<div class="slds-...
- 669
0
votes
2
answers
447
views
LWC: slds styling hook not working on icon inside a lightning-datatable
I have a icon showing in my lightning-datatable using the cellAttributes property. But I want the icon to be green (instead of the default of grey). I followed the slds styling hooks documentation, ...
- 153
0
votes
0
answers
148
views
LWC Styling Hooks are not working when using icon-class or class, but works when coded in style
I have a simple lightning-button-icon and we are changing the foreground color and for some reason, it works when we add style="--slds-c-icon-color-foreground:#0070d2;" but it doesn't work ...
- 484
1
vote
1
answer
362
views
Mobile-friendly Salesforce apps - What is needed
I am working on a Managed Package for the AppExchange, and one requirement is to enable it to be user-friendly on Mobile Devices.
The app will mainly consist of Native Features and use Standard and ...
- 37.3k
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
4
votes
1
answer
874
views
Make lightning:layoutItem fill the remaining screen space
I have the following component markup and essentially, I'm trying to make the content in yellow to fill the remaining space on the browser. I tried to do 100% but it did not expand. See screenshot ...
- 484
0
votes
1
answer
275
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
1
vote
0
answers
25
views
Does LDS Modals by default restrict tabbing behind it?
I am wanting to not tab behind a modal when that modal is opened. Reading the documentation for modals provided by salesforce, it seems that they take care of it. But when I am testing it I get mixed ...
- 316
1
vote
0
answers
54
views
slds modal in inline visualforce page
I'm using lightning out to put my lwc in classic record page. Everything works, except the slds modal open within the hight of inline vf page rather than as an overlay.
In lightning, this works ...
- 803
1
vote
1
answer
334
views
Lightning carousele style
I want to display products images on Product record page and I'm using custom component with Lightning Carousele, it's possible to change styles? ( I want to have images much smaller and fit cover).
- 33
0
votes
0
answers
2k
views
How to use Expandable sections in LWC?
I am using Expandable sections in my project. All works fine but when I click the expand (left) icon, it changes to (down) icon to expand the section. But when I refresh the page, it again becomes (...
- 180
2
votes
0
answers
170
views
Can datatable stripes or selected shading have custom colors?
We have a datatable that has striped shading (slds-table_striped) applied in HTML and selected shading (slds-is-selected) applied programmatically when the user clicks a row. However, both of these ...
- 877
0
votes
1
answer
206
views
How to toggle Error on values change in LWC
This code shows permanent red border which i want to toggle based on selection of values. If no value is selected, then only it should show the red border and the message otherwise not. How can I do ...
- 180
-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).
[
0
votes
1
answer
87
views
Not getting the dynamically added CSS classes using component.find('myCmp').get('v.class') in aura
I am working on a dual stateful button, so I'm adding and removing the 'slds-is-pressed' class in the component controller file on button click.
The logic is working as expected- the button states are ...
- 45
0
votes
2
answers
513
views
Basic LWC SLDS but columns horizontally uneven
SLDS newbie here. Here's my html:
<template>
<div class="slds-grid slds-wrap" >
<div class="slds-col slds-card slds-size_1-of-4">
<p>...
0
votes
1
answer
231
views
alignment issue with lwc
I have a table in which we have 3 mandatory input whenever a value is missing we have a alert message coming below the input but that is causing alignment issue as the input with no error are little ...
- 177