The Stack Overflow podcast is back! Listen to an interview with our new CEO.

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
1
vote
1answer
23 views

How to extend the SLDS Grid with additional x-large and xx-large breakpoints to support huge screens?

I need a grid having 1 columns for phones 2 columns for ipads and 3 columns on 1080p screens. I will also need more distinction for devices between 1000px and 3000px in screen-width. How to do that ...
0
votes
1answer
26 views

Use Radio button on Aura:Iteration

I am trying to use a radio button on my component that returns a list of values. I have been able to create the table, and return a list of values. However, I can only select the first value in the ...
0
votes
1answer
22 views

Hot to Add spinner to SLDS VF page when button is clicked

I must be missing something here because the spinner does not show up, but not sure where the problem is. What am I missing? <li class="slds-button-group-item"> <apex:commandButton ...
1
vote
1answer
18 views

Trying to center button on page

I have the following component code that I am trying to use to center a button on a page. It keeps showing left-aligned. I have tried using <center> tag and slds-align_absolute-center. ...
0
votes
0answers
8 views

Is it possible to link slds to an embedded chat deployment?

I am building a chat deployment to be embedded on an external site. I created a custom prechat form using aura/lightning components that rely on styling from slds. When embedded in the external site, ...
0
votes
0answers
7 views

SLDS Grind: how to prevent the inner spacing form being bigger than the outer spacing?

For my taste the visual appearance of https://archive-2_0_3.lightningdesignsystem.com/components/utilities/grid has a flaw. In all the examples the elements have just a "normal" kind of padding, ...
0
votes
1answer
29 views

How to override CSS in Aura Compoent

Update 2: After implementing the suggested answer, here is what I see the big space after 125px; and the purpose of top: 125px is to have a margin from the top. I'm trying to override the css style ...
0
votes
1answer
21 views

Auto-placement in SLDS Grid To dynamically adjust from 3 col to 2 col wrapped grid. Is it available

I'm looking to use a 3 col wrapped slds-grid layout when on a large desktop screen by 2 col when on medium. if there is enough dynamically retrieved data available. . is this inherit in slds or do I ...
0
votes
2answers
32 views

New Account Contact relationship (LWC)

I am building a custom LWC and on that component I have to give users ability to add a new indirect relationship among other things. I wonder, if there is a way to open this popup window from a ...
0
votes
2answers
51 views

Vertical padding between grid rows in lightning grid

Is there a way to vertically provide some gutter between the rows in a grid? Currently there is a gutter option but only for columns. I am following this article for reference https://www....
0
votes
1answer
69 views

Lightning Datatable errors tooltip not rendering properly on VF Page with lightning out

I have a lightning datatable. I'm trying to pop out error messages based on some values. I'm getting errors correctly mapped to each cell and each row as well. But the error tooltip is not getting CSS ...
1
vote
0answers
24 views

Color of field Error in VFP

I am using the Standard field Email of the Standard object Contact in a VFP. In Salesforce when I enter an invalid email address, I get the error message like this However When I enter an invalid ...
0
votes
0answers
39 views

What are drawbacks of using aura design tokens in lightning web component

Tokens <!--tokens--> <aura:tokens> <aura:token name="testBgColor" value="#e7e7e7"/> </aura:tokens> Aura Wrapper <aura:component description="auraWrapper" implements="...
4
votes
3answers
338 views

Difference in using Lightning Component <lightning:badge/> and Normal DOM with slds <span class=“slds-badge”></span>? Which is Better and Why?

Example: <lightning:badge label="Lightning Component"/> <span class="slds-badge">DOM Tag</span> Which is better? Which is faster? And why should I use Lightning component if I am ...
3
votes
1answer
190 views

How to make Button on LWC card look like native UI

I have a LWC component that (tries) to visually mimic the native Task List using lightning-card and lightning-button-menu but the New Button just looks different regarding the padding and size of the ...
1
vote
0answers
30 views

When aura component is added on details tab of a record modal won't preview in full-screen unlike in spring '19

This is only occuring when winter '20 is released. Already read the documentation of modals in slds didn't find any workaround.
0
votes
1answer
23 views

How to fix Apex:Inputfield Size when using slds sizing?

I am working on a vf page with a random number of fields. The problem I'm facing is related to the sizing of the fields. As shown in the screenshot, the contact number field is one long field instead ...
1
vote
1answer
39 views

How to work with the lightning design system CSS framework

I was asked by an employer to create a basic web page using Javascript, HTML, CSS, and to use the lightning design system CSS framework. I'm completely new to salesforce and I was wondering how ...
0
votes
3answers
65 views

Lightning: Stop page refreshing WHEN Enter key is pressed

I am using the ui:inputtext for lightning component. When the user hit enters the page refreshes. Is there anyway to stop it from doing that. Cmp <aura:component controller="MovieController"> ...
0
votes
0answers
83 views

Lightning Tree Grid using SLDS - Make rows expand collapse

I have created a tree grid structure using the code base found here at the SLDS documentation url : https://lightningdesignsystem.com/components/tree-grid/ The problem I am facing is that I am not ...
0
votes
0answers
17 views

Lighting:tabset rendering tabs in “more” drop down when tabs are populated dynamically even though it has enough space to display all tabs

My sample code is <div class="flexipageComponent"> <div class="tabset slds-tabs_card uiTabset--base uiTabset--default uiTabset flexipageTabsetV2"> <div role="application ...
0
votes
1answer
59 views

How to call a method from SLDS button class?

How can I call a method from my controller by using an SLDS VF page. I am using a button icon, that is showing on each record returned from a search. I would like when clicked to call a method from my ...
0
votes
2answers
43 views

SLDS VF Page Cancel button not working

When I click on Cancel button that is part of the VF SLDS page, I get an error specifying that Last Name for contact is needed.How can I bypass the standard field validation? Here is my button: <...
1
vote
1answer
78 views

How to make SLDS tooltip appear on hover over?

I have created an input check box that is on SLDS visualforce page. I am trying to display help text when a user hovers over the help icon. How can I set up the hover over action so that the tooltip ...
0
votes
1answer
26 views

How to add help text to fields with SLDS

I have a VF page which has SLDS formatting. I am trying to add help text to certain fields. I am using Custom Controller and am instantiating a Contact in my Constructor to get out of the box field ...
1
vote
1answer
26 views

Using slds, td in a table has overflowing text area. I need it to wrap

<td class="slds-form-element slds-size--1-of-12"> <apex:outputField label="Reason" value="{!rl.Reason__c}" styleClass="slds-output"/> </td> I have a text area field - Reason__c. it'...
1
vote
0answers
21 views

How to pre-populate standard Account edit page fields from a VF page with custom controller?

I have done this in the past, but it has been a while, and want to make sure if there are better ways of doing this. I have a custom SLDS VF page with a button "Create Account". A user will populate a ...
-1
votes
1answer
14 views

How to set Action Icon as a button in VF SLDS?

Is it possible to set an Action Icon to be a button? In my VF SLDS page, I am returning a list of records. For each record, I am showing an icon. I would like when for a specific record, the icon is ...
0
votes
0answers
118 views

Display lightning layouts in two different pages while printing - LWC

On Account record page i have a parent LWC which has a button. On click i am redirecting to childLWC. ChildLWC has two layouts. On print the page i want the two layouts should come in two different ...
2
votes
0answers
95 views

Visualforce page embeded in page layout is not coming with 100% width in lighting compact density

I have a visualforce page embeded in pagelayout and page is showing the 100% width for comfy but for compact it is not showing 100% width. Can any one tell me how to fix this issue?
0
votes
0answers
36 views

How bring Lightning component within a modal popup to front?

I have a lightning component in a modal popup and that lightning component is having an input lookup field which opens another lightning component(search result box in screenshot). <Parent ...
0
votes
1answer
176 views

Need help on SLDS with LWC

I am trying to implement the Custom Date Range Picker using Lightning Web Component Framework. My Code is allowing to select start Date and End Date and it is also highlighting the days in between ...
0
votes
0answers
87 views

SLDS icon not working in production but working in community and sandbox

I have a VF page which is sitting inside a managed package. This page displays a bunch of records and allows users to comment, edit and delete records. I have used SLDS icons to display my action ...
0
votes
0answers
55 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
72 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
122 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
45 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 ...
1
vote
2answers
113 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 ...
5
votes
1answer
27 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
2answers
250 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
78 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
350 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
130 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
94 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
45 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
210 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
214 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
64 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
269 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
25 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 ...