Last call to make your voice heard! Our 2022 Developer Survey closes in less than a week. Take survey.

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
11 views

Remove focus from close button on lightning:overlayLibrary modal

I have a flow modal that is generated via the lightning:overlayLibrary showCustomModal(). Is it possible to remove the default focus (or at least hide the focus with CSS) that is applied to the close ...
user avatar
0 votes
0 answers
26 views

query on slds-has-error doesn't fetch nodes

let errs = this.template.querySelectorAll("slds-has-error"); returns a proxy. But I'm unable to get fields which have an error. If I execute errs.item.length I'm getting 1 and running errs....
user avatar
  • 75
0 votes
1 answer
26 views

How to use SLDS responsive sizes when an LWC is in a multi-column page?

The size breakpoints in SLDS are based on the screen size which works great for LWCs that occupy the full width of the screen e.g.: <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-...
user avatar
  • 129k
0 votes
0 answers
15 views

How to remove the hex-code box from the lightning-input-field when type="color"

In salesforce, we use the Lightning input field that has type=color and shows the colour picker with its hex code. <lightning-input label="colour" type="color" value={data....
user avatar
0 votes
0 answers
32 views

After opening up a Base Modal from a LWC quick action, the cancel icon of the modal is not displayed properly

So, inside the LWC quick action I have used a Base Modal code given here https://www.lightningdesignsystem.com/components/modals/#Base. The problem is the cancel icon on the top is not in the correct ...
user avatar
0 votes
1 answer
35 views

How can I show more than 3 cards in LWC?

My page looks like this (I can see only 3 cards but there are more) https://i.stack.imgur.com/wnjw7.jpg How could I change this to show as many cards as possible? Should I use some attribute from SLDS ...
user avatar
0 votes
0 answers
22 views

CSS is not getting applied in HTML even when explicitly mentioned

I have added a CSS class to my div to get the margin (elucidated in the picture below). Whereas, the margin is not getting applied to the component. The CSS for that class is not getting displayed in ...
user avatar
  • 13
4 votes
1 answer
98 views

How to set consistent styling across many LWCs using styling hooks?

This Style Components Using Lightning Design System Styling Hooks documentation illustrates how to set custom properties on an individual custom LWC to change the styling: /* myBaseButton.css */ :host ...
user avatar
  • 129k
0 votes
0 answers
24 views

Long Text in Li is displayed in the second line behind the bullet point

I have tried using text-indent, still no use. Please help me on the below code and let me know where am doing wrong **css*** .checkList li:before, .check { padding-left: 10px; color: rgba(...
user avatar
0 votes
1 answer
44 views

Lightning component modal window with fixed size and proper closing buttons

I want to use a salesforce modal window using a lightning component, fixing its size to 90% width AND height of the screen to display larger content (a pdf preview). The standard modal component seems ...
user avatar
  • 165
0 votes
0 answers
30 views

Embed slds css in lwc email template

Has anyone managed to use slds in a lwc embedded in a email template? (lightningStatic__Email) Currently I have not managed to include slds (including minified) in the lwc/template as the file is too ...
user avatar
0 votes
1 answer
122 views

Aligning Footer Button to right in Lightning card

I am working on dashboard screen. I have a lightning card which where I want a button on right side inside a footer. Below is the code I am using. But When I am trying to align the button inside ...
user avatar
0 votes
0 answers
58 views

Any way to get scroll events or scroll position from a lightning-datatable?

I have a lightning-datatable set up to use infinite loading via onloadmore so batches of new records are fetched as the user scrolls. This works well. But I want to fade the bottom of the scrolling ...
user avatar
  • 129k
0 votes
3 answers
49 views

SLDS Source Code

I want to download the whole SLDS and inspect the CSS code on which it is based. For example: <div class="slds-align_absolute-center" style="height:5rem">This content will be ...
user avatar
2 votes
1 answer
482 views

Align lightning card title and button in LWC

How to align the lightning card title and button on same line, in aura there is aura:set but not sure if we have anything similar in lwc: <template> <lightning-card title="Similar ...
user avatar
1 vote
1 answer
61 views

lightning-dual-listbox selected column occassionally goes missing in a modal

I have a lightning-dual-listbox presented in a modal and occasionally the right-hand "selected" column does not render in Chrome or Safari as shown here: Refreshing the page generally fixes ...
user avatar
  • 129k
1 vote
2 answers
239 views

lightning-tabset tab styling hooks don't work

Say I have a simple tabset: <lightning-tabset variant="vertical" active-tab-value={activeTabValue} class="tab-active"> <lightning-tab label="Dashboard" ...
user avatar
  • 4,429
1 vote
1 answer
79 views

CSS styling hooks not applying for lightning-badge in LWC

I have the below lightning-badge component where I am trying to change the background color. The background color is not changing. What could be the issue? HTML: <lightning-badge label={product....
user avatar
0 votes
0 answers
24 views

Custom LWC slds-dueling-listbox for narrow region

I have customized the dueling list box as shown below: <lightning-layout-item size="12" class="slds-p-left_small"> <div class="slds-dueling-list__column slds-...
user avatar
1 vote
1 answer
203 views

need to display Icon near to field label in LWC for Combobox

I have t create one icon and need to show near to field name for combobox in modal window below is my code <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-...
user avatar
  • 13
-1 votes
1 answer
286 views

how to align combo box and help text near in LWC

I have one combobox in popup and i am adding one icon near to combobox field but its not alligning correctly <div class="slds-modal__content slds-p-around_medium" id="modal-content-...
user avatar
  • 1
0 votes
1 answer
405 views

Change the font and font weight for lightning-output-field

How do I change the font size, font weight of the text from lightning-output-field ? <lightning-output-field class="outputFont" field-name="Protocol__c" data-id="...
user avatar
  • 13
0 votes
0 answers
103 views

Arrow in Lightning-Accordion getting missed

I have used lightning-accordion in an LWC component where the arrow mark is getting missed. The below is present in the LWC documentation: LWC Dcoumentation for lightning-accordion This is the ...
user avatar
  • 13
0 votes
2 answers
40 views

Attempting to use SLDS Examples: are they using JS on the back end?

Attempting to get this example to work on my own visualforce page. The example is pulled from this link: https://www.lightningdesignsystem.com/components/lookups/. Is Salesforce using a JavaScript ...
user avatar
  • 1,268
0 votes
0 answers
21 views

slds validation is not consistent on some are JavaScript others are ServerSide for the same logic

Problem WE have different kinds of validation error messages appearing. We want to give a consistent user experience, but are struggling to do so. Any feedback would be helpful. Server Side ERROR ...
user avatar
  • 1,268
1 vote
2 answers
55 views

Apex:Form is inconsistently using JavaScript validation versus ServerSide Validation

I have very peculiar problem. I have two components that are in a visualforce page. The design is the same for all the components. We get a list of records and immediately below it we have a form that ...
user avatar
  • 1,268
1 vote
3 answers
945 views

How to color the utility icons in lightning datatable in LWC?

I have the below data table where I have two icons. I want to change the color to blue instead of grey. The variant property is not helpful. How do I do that? HTML: <div class="myTable"&...
user avatar
0 votes
1 answer
134 views

How to remove this huge distance between label and input in LWC?

How to remove this huge distance between label and input in LWC. I didn't use custom styles, only from the salesforce lightning design system. Here's my code from the HTML file: <div> &...
user avatar
0 votes
1 answer
415 views

Receiving error "Component has an invalid value for property." on App Builder

I have build a custom IconProvider class to display list of SLDS icons for selection on Lightning App Builder. public with sharing class IconProvider extends VisualEditor.DynamicPickList { public ...
user avatar
  • 13.2k
0 votes
1 answer
272 views

Creating a case with createRecord LWC error/trouble

I'm just trying to create a simple LWC that creates a case record from a button click. When I add the component to the account page and click the create button nothing is happening, there are no ...
user avatar
1 vote
1 answer
42 views

Why is the top margin of headings missing in Rich Text Fields?

When I add headings to a Rich Text Field on an Article, I'm seeing some strange behavior. In the HTML Editor, I see an even top & bottom margin (see attached screenshot). But when I save the ...
user avatar
0 votes
1 answer
46 views

slds grid broken layout when screen narrows to less than 480px

I'm using slds-grid. On large form factor the grid has 2 columns & on Medium & small forms 1 column - truncated. Issues: When screen narrows less than 768px, the grid component is not ...
user avatar
  • 33
2 votes
0 answers
24 views

Any way to make button-icon icons in a lightning-data table smaller?

I've tried e.g.: { type: 'button-icon', typeAttributes: { iconName: 'utility:jump_to_bottom', variant: 'brand', ...
user avatar
  • 129k
0 votes
1 answer
180 views

placing button menu in lightning-tile lwc

I am trying to create a tile which will iterate records. I am trying to place the button menu exactly opposite to "Salesforce UX" towards right corner. I am unable to it. Below is my code. ...
user avatar
  • 1,516
0 votes
1 answer
363 views

Lightning Layout - Align Bottom

I'm trying to see if this layout is possible with lightning layout without thinkering about the positioning via CSS. Basically, what I'm trying to do is to line up the content C layout with the green ...
user avatar
  • 362
0 votes
0 answers
87 views

Docking utility bar on modal footer LWC

I am trying to implement to use Utility bar on Modal . The issue i am facing is i am unable to dock the utility bar on modal footer, its getting docked on page footer. Is it possible to dock on modal ...
user avatar
  • 1,516
0 votes
0 answers
65 views

Not able to find index.js on Heroku [LWC OSS]

Getting the following not found error while deploying a new, non-modified version of LWC OSS. It was just a simple installation of npx create-lwc-app, and some basic steps in the package.json to make ...
user avatar
0 votes
0 answers
32 views

Can't get slds-truncate to function properly

I have an aura component that displays a list of articles and needs to be responsive. I have a pretty simple HTML setup to render the columns inside an slds-grid element: <div class="slds-grid ...
user avatar
-1 votes
2 answers
105 views

How to set width for lighting-button

I was able to set background and text color based on slds styling hooks but not sure how to set the width: <lightning-button variant="brand" label="View Details" title="...
user avatar
0 votes
1 answer
88 views

slds-grid system not working as expected

My requirement was to dynamically render div's in an grid horizontally once a platform event is received to the component. Here is my code and what i am doing as of now : HTML : <!--The Grid ...
user avatar
0 votes
1 answer
403 views

Align footer section of modal to center

I want to display the buttons in the footer section to the center and I'm using the modal container. I have tried multiple CSS but none of them are not working, could you please suggest me the correct ...
user avatar
  • 1,420
0 votes
0 answers
54 views

Styling Hook for the height of lightning-textarea shows different height in chrome and firefox

I am using the styling hook "--sds-c-textarea-sizing-min-height" which is provided by Salesforce for setting the minimum height of lightning-textarea. Now the problem is, I have given it ...
user avatar
0 votes
2 answers
201 views

How can we change the css for lightning input toggle or change the standard defined css to our own?

I would like to change the color of the toggle from blue to green.
user avatar
0 votes
0 answers
60 views

lwc accessible modal window

I have an implementation of a modal window as an LWC which is working fine, but there is a new requirement for it to be accessible. Reading through the modal docs on the lightning design system site ...
user avatar
  • 175
0 votes
2 answers
63 views

How to display child(Grand Child or any level of child) component to look as its top most parent's sibling in the same grid

I do want to have UI something like the image attached bellow: But finding the code is not creating such. Instead getting UI as shown in bellow attached image: What I'm doing wrong. Find the code(...
user avatar
0 votes
1 answer
399 views

Unable to override font-family in lightning-input label using LWC styling hooks

How to override the font-family using styling hooks? I tried writing a custom CSS class with --lwc-fontFamily property set to my custom value and applied that CSS class to the lightning input element. ...
user avatar
0 votes
1 answer
68 views

Is it possible to place accordion inside title section on a card or in that space?

I am trying to get an accordion in the space the title of a lightning-card is placed, so I am utilizing all of the space that I can. But instead all I can do is place it outside of the lightning-card ...
user avatar
0 votes
1 answer
23 views

why does the toggle load in checked state, even though I have set checked="{!v.item.Packed__c}". Packed__c is a checkbox woth default value false

Please find the code below: App-- <aura:application extends="force:slds" > <aura:attribute name = "item" type = "Camping_Item__c" default ="{**'...
user avatar
0 votes
1 answer
52 views

badge with Icon and text -- can't space them out

<h2 class="slds-badge" > <lightning-icon icon-name="utility:clock" alternative-text="clock" size="xx-small"> </lightning-icon> <...
user avatar
0 votes
0 answers
49 views

How can I show a "div" that pops up from within a "div class='slds-scrollable_x'" over all other elements?

THE CONTEXT: I am in the process of implementing via HTML and SLDS styling, a datatable that is inline editable and has resizable columns. When the user clicks on a cell, an input 'pop up' is shown to ...
user avatar

1
2 3 4 5
12