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

Custom Lightning / Aura Component not rendering a dynamic list unless manually refresh page

Hey so I have a custom Aura / lightning component on the Quote object pages. The component basically as a user search bar that searches for users. It's built basically using this lightning design ...
0
votes
0answers
16 views

Custom Maintenance popup same like salesforce

i have curiosity on how salesforce implement Maintenance Window/popup or Alert banner? below images. i want build same like but all my doors are closed to get the same out put. or I tried bellow 2 ...
2
votes
0answers
24 views

How to make lightning-layout-item grow horizontally or vertically or both?

I'm trying to create a flexible layout using lightning-layout and lightning-layout-item base components in LWC. The screenshot of the basic idea is given below. Appreciate inputs on how can we achieve ...
0
votes
0answers
29 views

Emojis/emoticons in Rich text field LWC?

I am trying to build a LWC component with a rich text editor and want to know how to get the emoji option in the tool bar.
0
votes
0answers
22 views

How to pass take record id while pressing a overiding button and take it to the component

I was working on a project in which I have to override a button. After overriding, I get redirected to a new page and lose the reference to parent id. Can someone give a solution to this problem? ...
1
vote
1answer
26 views

How to combine two rows value into one and perform the same action in lightning-datatable

Based on the common value of Country and City. I want to group rows and provide single button for any action which will be applicable for both the records. eg below
1
vote
1answer
36 views

Regex for minimum characters in long text area field

There is a screen flow in which I have a long text area field. For that field I want to check that there are at least 5 characters entered in that field. I was using the regex - REGEX({!Case_note},“^.{...
0
votes
1answer
28 views

How to scroll on the top of modal

i have a modal popup with scrolling, i am trying to scroll the user to the top of the modal when the user clicks on a button. window.scrollTo(0,0) is scrolling the main window not the modal.
1
vote
1answer
27 views

BEM Notation & SLDS Validator

With the BEM Notation change being enforced in Summer 21, what's the best way to search the code base for any references requiring updating? I've tried to use class=".*--.*" and .*--.* while ...
0
votes
0answers
11 views

sforce.one.createRecord doesnt populate default values in edit mode for country and state

I'm creating a new lead from contact on click of a list button. I have a visualforce page that button points to and visualforce page javascript code. I'm using sforce.one.createRecord and providing ...
0
votes
0answers
23 views

How to capture data from Flow Screen Inside aura:iteration in Lightning Component

I created an aura component that has tabset and a flow screen which is a normal form. There is a variable called quantity. If quantity is 4, my aura component creates 4 tabs and each tab would have an ...
1
vote
1answer
13 views

Scale size of lighting input toggle

I was hoping that there was an easier way to do this. I have loaded some custom CSS from our client into our customer community using an Aura theme layout component. Most things either looked fine or ...
0
votes
0answers
27 views

Difference in loading css from static resource and using css inside folder structure in LWC

I am trying to use the below custom datatable where we can add picklist https://live.playg.app/play/picklist-in-lightning-datatable In this all the css has been added to static resource and it is used ...
1
vote
1answer
72 views

SLDS modals: combobox loses focus on scroll

I have a modal with a lightning-combobox in it. When the combobox is in focus, the dropdown is displayed. When the user clicks elsewhere, the dropdown is hidden. So far so good, but if the height of ...
0
votes
1answer
88 views

How to create custom related list quick links in lwc

I am trying to create a custom related list quick link inside a LWC. I have 2 objects A and B. From the apex I am returning the list of B related record but how can I display it like a related list ...
0
votes
0answers
13 views

How to access the translation for the close button title?

On standard visualforce page there is a close button, when we hover it, it displays a tooltip "Close this window", if the user's language is not English, it will display in other languages. ...
0
votes
1answer
12 views

Setting class of lightning-input to slds-theme_error seems to disable it

After setting the class of lightning-input to slds-theme_error, it seems like the input element has been disabled: clicking inside the element puts the focus on it, but no cursor appears and typing ...
0
votes
1answer
51 views

Alignment of Lightning button and input Text in a single line

I need to remove the alignment issue from my below code of lightning component ,i dont know where I am going wrong. I want to align the input text field and Brand button in the same line. Component :- ...
1
vote
0answers
36 views

Lightning aura components not rendering as expected

We have a few Aura components in managed package application. There are few drop down selection inputs, few buttons to redirect from one page to another page etc.. Issue is that these input values are ...
2
votes
1answer
160 views

Styling Hooks in Base lightning Component (LWC Open Source)

I'm trying to implement Dark mode/ light mode variant in my LWC open source application which internally uses base lightning components. I read the documentation about using styling hooks from ...
0
votes
0answers
13 views

lightning outputfield allignmnet

How can i make the text to start from the left of the arrow . Below is my snippet which i am using : <div class="slds-form_horizontal slds-align_absolute-left "> &...
0
votes
0answers
68 views

Change font-size of SLDS header

I'm using apex:slds/lightning design system and I'm wondering how we can change the font-size on headers/paragraphs. <apex:page applyBodyTag="false"> <apex:slds> <title>...
0
votes
0answers
23 views

Lightning:recordEditForm error

I have used Lightning:recordEditForm to edit a preexisting record'scertain field. But it shows an error "Required fields are missing: [Name, StageName, CloseDate]". I believe this should ...
0
votes
0answers
23 views

How to reset uploading file using lightning file upload after clicking on cancel button in lwc [duplicate]

When I click on new button to uploading a file and click on cancel button, then again I click on new button I want to reset the previous uploaded file from there. *...
0
votes
0answers
35 views

How to close lightning-combobox menu items when scrolling the page in LWC?

I have a LWC and a lightning-combobox inside it, but while the dropdown items are open and I scroll the page, the menu items are still visible on top of other items. I need to auto-hide the menu items ...
0
votes
1answer
45 views

How to combine two aura ifs into one?

I have been trying to to simplify a nested <aura:if isTrue> into a single line. I thought I could wrap this with an or(statement1,statement2) but I think I'm missing something. The expected ...
0
votes
0answers
26 views

A Line break occurring between Label and custom component

Below is the screenshot, where the Customer and Division are not aligned. But anyhow the bill to and Ship to are aligned This is my HTML code, where i am using the same code for both the elements ...
0
votes
0answers
95 views

how to do designing for snap-in chat for Custom Pre-Chat custom Component Using Aura

Below is my pre-chat form I want result like that below is my Custom Pre-Chat Component Code Using Aura --- Component Code <aura:component implements="lightningsnapin:prechatUI" ...
0
votes
0answers
40 views

Why isn't my LWC passing the values on submit to my apex class?

I've created an lwc that is called in a flow, but when I run it the form doesn't submit and the values aren't passing to the apex class. I can't figure out why. The form allows me to populate the ...
0
votes
1answer
39 views

How to get Id of the created record when using .submit function

How do i get the record ID of the newly created record when i use this.template.querySelector('lightning-record-edit-form').submit() and store it in a variable?
0
votes
0answers
35 views

Unable to truncate lightning:formattedRichText text

I have a problem with a lightning:formattedRichText element. Below my code : <ul class="slds-list_horizontal slds-has-dividers_left"> ...
0
votes
0answers
12 views

How to update only the lightning-edit-record object for which fields got changed when there are multiple lightning-edit-record forms

I have a form which has multiple lightning-edit-record form. For example, my form looks like: <lightning-record-edit-form object-api-name="Machine_Configuration__c"> <...
0
votes
0answers
17 views

Auto adjust Salesforce tabs in custom lightning template page as per OOTB lightning template page

I have created a custom lightning template page and in bottom its divided into two parts. But when I add tabs in one of the component even though I have given size to lightning:layout the tabs header ...
0
votes
0answers
22 views

Can you set embedded services chat to automatically open the pre-chat form if agents are available?

Basically the title. I've got my chat configuration all set up how the stakeholders want it, but they're asking if there's a way that the Pre-Chat form can automatically open in the page that we have ...
1
vote
1answer
38 views

Is there a way to conditionally block standard Salesforce Informational Inline Text?

Like the title says, I have a use-case in which I need to block a specific standard Salesforce Information Inline Text Pop-In, specifically the ones concerning Duplicate Matching Rules: The reason ...
2
votes
0answers
40 views

Change progress indicator design - Custom Journey Activity

We are currently developing a multi step Custom Activity within Marketing Cloud. The UI for the steps is quite old fashioned, as you can see from the picture bellow: There is a newer design within ...
1
vote
1answer
19 views

Is there a way to make the lightning-input placeholder text appear smaller

I'd like to make the placeholder text to appear smaller in the lightning-input component. Is it possible? and if yes, how can I achieve that? Thanks!
0
votes
1answer
67 views

Scrollable Utility Not Working on Aura Component in Global Action

I've got a Flow being called in a Global Action via a Lightning Aura Component. The Flow and Component are working, but for some reason the scrollable utility isn't. Does anyone have any idea what the ...
0
votes
1answer
305 views

Styling an LWC component with a lightning-tab to use the slds-has-success style

I have a LWC component that includes a set of tabs using the standard "lightning-tabset" and "lightning-tab" metaphor. When the actions in a specific tab have been completed, I ...
0
votes
0answers
10 views

Not able to full screen Model Component from Utility Bar

i want the full screen for the Model component from the Utility bar. it is bound to the Utility bar. Any help please
0
votes
0answers
26 views

How to apply margin only on large screen(>=1024px) using SLDS?

Is there a SLDS class that applies margin only for large screens(>=1024px). I found my self in many situations where I had to write media query like below but curious if there is an inbuilt class ...
0
votes
1answer
17 views

Uncaught Action when setting mapMarkers for Aura Component Map

Please note this question is about the Aura Component Map not about a collection of key/value pairs. Specifically, I'm getting an error when trying to set the required mapMarkers attribute on an Aura ...
0
votes
1answer
85 views

Lightning Web Component That Allows Text Input and Dropdown

Is there a LWC that allows me to utilize it as a text input field and also a dropdown menu? I need to display results as a dropdown but also allows user text input to search.
1
vote
1answer
87 views

SLDS style show weird in IE-11 after upgrade to Winter 21

After upgrade to Winter 21, I found Lightning Design System show weird in IE-11. Please see follow image. And this is my code. <apex:page sidebar="false" lightningStylesheets="true&...
1
vote
1answer
74 views

Lightning Component - How to show / hide a section for my component in an iteration

I'm doing a lightning component using lightning:accordion. I wanted to use a Plus/Minus symbol but it seems like you can't custom the icon of accordions. So i found some code enabling to do something ...
0
votes
1answer
157 views

Lightning Web Component - Combo box - populate value from Wrapper Class

I am trying to populate a list of contacts from the Wrapper class.However, I am not getting any values to display in the Combo box. Here are my codes Apex Controller Class: public with sharing class ...
0
votes
1answer
45 views

Inquiry about lightning-record-form

I am trying to find a definitive answer to an issue I'm trying to work through. I have a lightning-record-form in a component that I am trying to access the field values for, without having to rely ...
7
votes
2answers
264 views

Winter'21 Release - BEM Notation Change

Does BEM notation change have an impact on all of the components where SLDS is used? Earlier the SLDS was being included as a static resource but off-late it is not necessary to do that. In this link: ...
0
votes
0answers
56 views

Unable to get single dropdown for each row in autocomplete in lightning component

Component HTML: <div class="slds-box"> <table class="slds-table PoTable slds-max-medium-table_stacked" border="1" style="border-collapse:collapse;...
-2
votes
1answer
208 views

Lightning tab with custom label in LWC [closed]

I need to show the some number inside the lightning tab label in my one req: below is the screenshot: I just need to show this 1 inside the red badge: below is my code: <lightning-tab label='{...

1
2 3 4 5
17