Skip to main content

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.

Filter by
Sorted by
Tagged with
0 votes
1 answer
20 views

Colspan not working in SLDS lightning Salesforce LWC

paste the below code in w3 school HTML code. I want the same UI using SLDS lightning but the rowspan is not working as it works using plain HTML tags. I tried all possibilities but they were not ...
Adarsh Srinivasan's user avatar
0 votes
0 answers
28 views

CSS couldn't be used inside Lightning Component

So I have been learning Lightning Component for a while and I know we have styling hooks to style lightning components like lightning-card, lightning-badge, etc. However, whenever I got, let say, a ...
Hieu Hoang's user avatar
-1 votes
0 answers
16 views

custom look up drop down is not opening in base slds modal

i am using this below custom look up in base slds modal but drop down is not opening. https://lwcfactory.com/custom-lookup-salesforce-lwc enter code here <section role="dialog" tabindex=&...
shashank kulshreshtha's user avatar
0 votes
0 answers
33 views

How to fix SLDS updates in new release, issue for tab icon color

I have following code working perfectly with tab icon color brings up perfectly. Suddenly after today's release patch it got failed, Any idea to enable tab icon color ? HTML: <template> <...
Ragul's user avatar
  • 541
0 votes
0 answers
22 views

SLDS Email Docked Composer not displaying complete composer

We are creating a create send email component which is replica of standard email component due to customer requirement. So created a custom button at LWC component, On click of the button email ...
Ragavendra's user avatar
0 votes
0 answers
15 views

How to setup slds-grid for screens with less than 480px

My slds-grid gets broken when pixels of the screen gets less than 480px, as per salesforce documentation, there is not option available for screens less than 480px to set grid for. But Mobile screens ...
Himanshu Damani's user avatar
0 votes
1 answer
140 views

How to remove x on lightning pill but in LWC

I saw there is an answer to this question but its not working for LWC, I think it does the job for aura component, so what do I need to write in Css so I can have x removed from all my lightning pills?...
Dimitrije Pesicc's user avatar
0 votes
0 answers
35 views

After Applied Custom Colors to a ShowToastEvent in LWC in console log changing the color, how can change in LWC JS or CSS style how can we apply

This is the code what i have tried. .slds-theme_success, .slds-theme--success { --slds-toast-color-background :rgb(29, 95, 216); } if (result.messageInSubscribe === 'Data Found in Both Master and ...
subba reddy's user avatar
1 vote
0 answers
68 views

How to change the fontsize of datepicker?

When I change the font size of the datepicker in CSS, the font icon mis-aligns. I've been reading about SLDS and how it uses CSS tokens to do styling, but I couldn't figure out how to change this. Any ...
Z0q's user avatar
  • 91
0 votes
0 answers
14 views

Suppress space for label in Lightning component in a table

My component has this lightning:select input component on it and I cannot suppress the label section. I see what slds css is being added but I can’t seem to prevent it. <div class="slds-col ...
Ohmicron's user avatar
  • 697
0 votes
0 answers
47 views

slds-grid question

Would it be possible to create an slds-grid like below?
Alan's user avatar
  • 25
1 vote
1 answer
1k views

What is the best way to change the font size and style of a lightning-card title?

As the title says, what is the best way to change the font size and style of a lightning-card title. I have tried the following... 1) First, using these Styling Hooks on a lightning card... :host { ...
louis's user avatar
  • 91
0 votes
0 answers
55 views

Error on load slds.css in a public visualforce page

I have two sandboxes, in one of them I'm developing this visualforce page that uses slds, when I deployed the features to the other sandbox the slds.css doesn't load. In the first sandbox works just ...
Felipe Belchior's user avatar
0 votes
0 answers
16 views

lightning-icon is not working on the model window

The code below is a model window, and I am want utility: forward icon to display in the middle of combobox and the button but nothing displays. And for the combobox, the inverted triangle is also not ...
Neophyte's user avatar
3 votes
0 answers
212 views

How to inherit css from parent within the child using light dom?

I have a child component that is used to recursively iterate through a tree. The parent component has css that is using the shadow dom and the child component is set to use the light dom. While ...
usernameabc's user avatar
2 votes
2 answers
2k views

How to style child component from parent component css?

I have two components that have a parent and child relationship. I am trying to apply css from the parent component's css file to the child component without having to write it in multiple places. ...
usernameabc's user avatar
0 votes
1 answer
38 views

Which SLDS CSS code is used to hide error text on file upload pop up?

Our client's Experience Cloud site has some CSS code that another consultant implemented, but since I cannot get in touch with them, I hope any of you can help me out. I am trying to figure out how to ...
Mille_B's user avatar
1 vote
0 answers
98 views

How to use SLDS Styles with LWC embedded in Visualforce

I am embedding a custom LWC in a Visualforce page, as described in Use Components in Visualforce Pages in the LWC Docs. It is working fine, except some styling is wrong/missing. For example, my LWC ...
Jason Clark's user avatar
  • 11.9k
0 votes
1 answer
37 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"&...
pincet's user avatar
  • 919
0 votes
1 answer
138 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....
Baba Shaik's user avatar
0 votes
1 answer
802 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 ...
Darrell W's user avatar
1 vote
1 answer
810 views

Documentation for SLDS colour and background colour classes like slds-text-blue

I am new to salesforce design system and I have never used CSS classes in Salesforce before. I am trying to find proper documentation for SLDS colour classes but I didn't find exact one. What I find ...
Pragati Jain's user avatar
0 votes
2 answers
464 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&...
Jason Rickert's user avatar
0 votes
0 answers
117 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=&...
Pam's user avatar
  • 107
0 votes
1 answer
79 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 ...
Semmel's user avatar
  • 2,507
0 votes
1 answer
2k 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"> <...
Valeriy Kutsar's user avatar
0 votes
1 answer
233 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%...
Akash's user avatar
  • 363
0 votes
1 answer
2k 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 ...
Amax1's user avatar
  • 121
2 votes
1 answer
584 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 ...
Nic Stage's user avatar
0 votes
2 answers
36 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 '...
unflagged.destination's user avatar
0 votes
1 answer
135 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:...
SFDC Learner's user avatar
0 votes
1 answer
202 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-...
SFDC Learner's user avatar
0 votes
1 answer
279 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 ...
Keith C's user avatar
  • 136k
2 votes
0 answers
319 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 ...
Dukelix's user avatar
  • 31
2 votes
1 answer
555 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 ...
usernameabc's user avatar
0 votes
1 answer
203 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 ...
seekingPeace's user avatar
1 vote
2 answers
1k 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 ...
Akshay Gupta's user avatar
1 vote
1 answer
2k 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 ...
Morgan Marchese's user avatar
-1 votes
1 answer
408 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, ...
Rahul Allada's user avatar
1 vote
1 answer
2k 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 ...
Bryan Anderson's user avatar
0 votes
1 answer
846 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 ...
Sandeep Daniel's user avatar
0 votes
0 answers
164 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. ...
Suneel's user avatar
  • 1,341
0 votes
2 answers
473 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 ...
sfdcnoob's user avatar
  • 632
2 votes
1 answer
624 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 ...
nstuyvesant's user avatar
0 votes
0 answers
766 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 ...
MnZ's user avatar
  • 3,170
0 votes
1 answer
364 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 ...
Robert Uzdavines's user avatar
1 vote
1 answer
414 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-...
mackmama's user avatar
  • 709
0 votes
2 answers
650 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, ...
Tom's user avatar
  • 152
1 vote
1 answer
545 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 ...
Robert Sösemann's user avatar
0 votes
0 answers
94 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
Zed's user avatar
  • 1

1
2 3 4 5
13