Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

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.

0
votes
0answers
14 views

A Data Table with both column and row headers present using SLDS?

I need to create a Data Table with column header and row header. Data Table from the Component <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-...
0
votes
1answer
22 views

Slds brand band not appearing with custom component in visual force page

The slds brand band disappears after the component is loaded into the div. How do i fix this issue so that i can have the salesforce background with my custom component. Steps to reproduce: ...
0
votes
1answer
29 views

Is possible to use lightning:combobox with grouped options?

In the SLDS documentation, it is stated the possibility to have a combobox with grouped options. It is possible to achieve a similar result with the lightning aura component lightning:combobox? In ...
0
votes
1answer
36 views

How to save HTML code from web page?

I want to send email after showing preview. For preview, I am using slds-modal in lightning component. It's layout is as shown in image. Is it possible to save html code of modal content and send it ...
0
votes
2answers
25 views

slds-gutters not adding spacing between div's

The slds-gutters class does not seem to add spacing between the div's. What is the reason for this? Essentially I could add padding, but I would like to understand why there is no spacing between the ...
3
votes
1answer
18 views

Can I use Prompts from SLDS in my managed app?

While reading through the docs about Promts, I noticed this guideline: Note: If you’re a partner building an app that appears within Salesforce, don’t use this component. Does it imply that I ...
1
vote
1answer
46 views

Lightning Path Style Issue in Lightnign Web Component

I am trying to create a lightning path in LWC, for which I used two components with SLDS Path. But the view is not as expected to Chevron. Parent Component: customPathLwc <template> <...
0
votes
1answer
36 views

Does exist an expression lightning component and/or expression lightning web component equivalent to SLDS expression?

In the SLDS documentation, I've found a whole page about expressions, how to use them and how to make them similar to the ones implemented in Salesforce UI. Does exist something similar as a ...
0
votes
1answer
66 views

SLDS Button refreshing entire page on click in LWC

I am just after a simple button icon to indicate a warning. I need it to pop up a tooltip on click of the errors. So I found <lightning-button-icon> which was just about what I needed. The ...
1
vote
1answer
30 views

How to get rid of up and down arrow buttons from a lightning duallistbox?

The documentation doesn't seems to have that information covered. Did anyone had same issue figured a way to hide that column?
0
votes
0answers
29 views

Use SVG in Lightning Web Component

I'm trying to use the Going Camping illustration from the SLDS documentation, I tried to copy-paste the code and put it in Playground but nothing comes up except for the text, same if I copy it to ...
1
vote
1answer
23 views

How to implement SLDS Notification in Lightning Component inside Site (Lightning out)?

I would like to show a notification in Lightning component that is acceded via Lightning Out in Site, I cannot use Toast messages. The message that I want to show are on success and on error. Any ...
0
votes
1answer
38 views

align Lightning modal header text to left

want to align lightning modal text header to extreme left (Styling issue) just want to align terms and condition text to left side but not shifting even after applying css align: left modal.cmp ...
0
votes
0answers
47 views

Table headers not wrapping in slds table

I have used slds table <div class="slds-wrap slds-cell-wrap slds-p-top_xx-large"> <table class="slds-...
0
votes
0answers
34 views

How to add the css in lightning component style class

I am using a third party lightning component in 'lightning Flow' to display dynamic questions. Some checkboxes are getting displayed via that lightning component but their width is set to 100%. I ...
0
votes
1answer
81 views

How to add css to override existing styling in lightning component

I am using an existing lightning component that displays some checkboxes. I am wondering if there is a way to reduce the size of the checkboxes. <design:component > <design:attribute ...
0
votes
0answers
18 views

How to validate the <apex:inputfields> on form submission and show error using SLDS?

I am using SLDS in a VF Page and I am referring to this link here to show error. The problem is the error is displayed on page load because I am not removing the Slds-has-error class. But, how do I ...
2
votes
1answer
30 views

Way to preview slds classes

Is there a way to preview how a component will react if I add a new slds class to it? I am new to Lightning component development, doing my development in VS Code and using scratch orgs. Currently I ...
0
votes
1answer
24 views

Show error when user has entered value and removed it or field is empty while submitting the form in SLDS

I have a few input fields on the layout and all of them has slds-has-error class to get the red box along the field and displaying field is required text beneath the field. However, my problem is, ...
0
votes
0answers
32 views

Use the Salesforce Lightning Design System to Style Visualforce Pages Issue

Working through the Visualforce Mobile module I want to do an exercise (3rd unit) that consists of displaying the contacts their names and phone numbers. <apex:page showHeader="true" sidebar="...
2
votes
1answer
27 views

Showing error using SLDS Has Error on Apex:Inputfield with Aria-describedby

I am using the SLDS in visualforce page and trying to display error next to the component by following this. But aria-describedby does not work with <Apex:inputfield> and throws error. Here's ...
0
votes
1answer
45 views

SLDS Spinner with backdrop on VF Page on Button click [duplicate]

I am trying to add a spinner with a backdrop as the loading screen but the spinner is not working when the action function is invoking. Action function is able to call the apex method but not invoking ...
0
votes
1answer
163 views

Table row LWC breaking SLDS styles

Situation I'm building a table row LWC to separate and encapsulate some logic like so: <!-- tableComp.html --> <table class="slds-table slds-table_cell-buffer slds-table_bordered"> &...
0
votes
1answer
244 views

LWC lightning-button-menu alignment

I use lightning-button-menu component and would like to align the menu top. I found that it can be aligned left or right, but it there a possibility to align top? <lightning-button-menu ...
0
votes
0answers
42 views

Space between columns in a grid - not symmetric

In the simple bellow grid I would like to separate colons with a small blank.For this i use the class slds-gutters on the grid. The problem is that it also put a blank after the last column of the row ...
0
votes
0answers
83 views

CSS issue with “ slds-popover slds-popover_tooltip”

I used slds-popup in a table. And those popup contains multiselect picklist values options with break(<br/>). My problem is when popup values are more, then its going to the second column. ...
0
votes
1answer
65 views

I need a grid with 7 equally spaced columns

I'm trying to use lightning-layout and lightning-layout-item to get a row with 7 equally spaced columns (no matter the contents) that fills the full width of the container. slds-grid is useless ...
2
votes
0answers
56 views

apex:slds not loading for Community Guest user, throws unsupported stylesheet MIME type error

The LDS CSS is not being loaded by using apex:slds tag for Community Guest User. It generates a link tag as below: <link class="user" href="/Customer/slds/css/gx0YG61QwKo3viF0Mc1gTw/min/scoped/one:...
0
votes
0answers
44 views

get label(s) of selected values of checkboxgroup

I would like to get the label(s) of the selected values of a checkboxgroup component. <aura:component> <aura:attribute name="options" type="List" default="[{'label': 'Ross', 'value': '...
0
votes
1answer
172 views

SLDS table content is not truncating the long text

SLDS table is not truncating the long text in table column. I have given slds-truncate class as well but its not working. <aura:component implements="force:appHostable,flexipage:...
-1
votes
1answer
118 views

How to add left and right borders using slds

Image: In this image, The edges are not cutted very properly.I really Look some thing like this. I have tried using "slds-box" still issue is same. How to do like this: Lightning code: <div ...
0
votes
1answer
147 views

how to add slds info icon in VF page? [duplicate]

In my VF page i have header .I want to display info icon before my text (before Note). Vf Code <div class="slds-page-header"> <apex:outputpanel rendered="{!isSuccess}"> <...
0
votes
1answer
61 views

Lightning design system(LDS)- what is possible?

We've implemented couple of lightning based projects involving medium usage of LDS. So far our approach is to build any UI is Check the requirements from business Consider possibilities within LDS ...
4
votes
1answer
639 views

How to add a functionality to stop copy paste on an input field in lightning?

I'm making a form that includes two fields, Email and Re-Enter Email. I don't want the user to copy and paste the email id in the second field. I have to prevent right clicks on the re-enter field and/...
0
votes
1answer
253 views

slds grid column alignment problems!

For some time i have been trying to left align the center column, but still keep it at the center. ON the image below you can see the icons with the counts for each service, but not aligned to the ...
1
vote
0answers
231 views

How do you dynamically hide lightning:helptext popover elements?

The popover element (lightning-primitive-bubble) from a lightning:helptext component stays rendered on the page even after the parent component containing the lightning:helptext is destroyed and even ...
1
vote
1answer
53 views

<apex:slds/> tag vs the Lightning Design System Static Resource for Manage package developement

I am new to manage package development. I want to develop a Visual force page with Lightning styles. I know the two approaches as below: Using <apex:slds> tag. (I will have to change the ...
0
votes
1answer
245 views

Lightning Pill as Output Text

I have a component having multiple values.The multiple values are coming properly in the input text box. I want to show the values selected from the list as lightning pills. My Component Code is :- &...
0
votes
2answers
171 views

Change the title of a slds button in JS controller

Maybe this has been asked before, but I was not able to find it anywhere. I am trying to change the title of the slds button on click through controller. I am trying to get the current title through ...
2
votes
2answers
894 views

How to use “Custom” SLDS icon in lightning:icon tag?

I have a page header component that I have built using the SLDS styling, but I since SVG tags aren't allowed in lightning components, I can't use the my custom icon (my custom object uses the airplane ...
-1
votes
1answer
107 views

Whats the alternative tag for height in slds

I Placed Lightning Componet in community.But this is small component,because of that reason footer is appeaing near to that component. Logically footer needs to appear in bottom so What I did, I ...
2
votes
2answers
283 views

How to adjust column width in <lightning:tile> <dl class=“slds-list_horizontal”>?

I tried following the SLDS Utilities patterns for both Name Value Pairs and Description List... In both attempts, the labels' text was truncated, and the tiles had an undesirable excess of white ...
4
votes
2answers
1k views

Aura:If vs Styling to show/hide content

Are there any benefits/negatives from either of the approaches below to conditionally show content in a Lightning component? <aura:if isTrue="{! v.myBoolean }"> The Content </aura:id> ...
1
vote
1answer
34 views

set width of left div relative to screen [closed]

I have created a lightning component which has the two div-left div & right div. <div class="float-left-area"> </div> <div class="float-right-area"> </div> CSS: .THIS....
3
votes
1answer
38 views

Listener on backdrop click

In my component I have the following element: <div class="slds-backdrop" aura:id="backdrop"></div> In code I activate backdrop using: $A.util.addClass(component.find("backdrop"), 'slds-...
1
vote
2answers
371 views

Simple Popover Example Causing: “Cannot read property 'na' of undefined”

I'm trying to get the popover example from the Salesforce documentation working and it's giving me an interupt error with "Cannot read property 'na' of undefined" message. All I have done is copy ...
0
votes
1answer
95 views

Use 2 different lightning:recordViewForm inside one SLDS Page Header

I want to show data from 2 different objects inside an SLDS Page Header For the page header I use <ul class="slds-page-header__detail-row"> For the data - I use lightning:recordViewForm If I ...
1
vote
1answer
58 views

The Prompt message in my SLDS VF page does not display properly

I think I have all components in place, but for some reason the Prompt message is not rendering correctly on my Vf page. Could anyone point out the problem? Here is my controller: public class ...
2
votes
1answer
94 views

Accessing SLDS in a Custom Visualforce Email Template

<messaging:htmlEmailBody> <html> <body **class="slds-align_absolute-center"**> <p> All this must be center aligned</p> <p> All this ...
2
votes
0answers
179 views

SLDS Grid Columns Not the Same Width

I'm creating a form and using lightning:layout and giving the lightning:layoutItem a size of 4, which renders <div class="slds-size_4-of-12">. However, I noticed that the last column in the grid ...