We’re rewarding the question askers & reputations are being recalculated! Read more.

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
0answers
19 views

How to add Custom HTML in Lightning Component Dropdown Menu? [closed]

I'm trying to create a dropdown menu with specialized internal options. SLDS Menu - https://lightningdesignsystem.com/components/menus/ Respective Lightning Component for this is - https://...
0
votes
0answers
18 views

Can I directly use SLDS images in community html

Can I directly use slds images directly in community HTML? Like below: <img src="/assets/images/avatar1.jpg" alt="meaningful text" /> Or I need to upload them as a static resources and then ...
0
votes
1answer
27 views

Make slds-grid with 6 exactly equally square sizes (2 Rows & 3 Columns) & acquire all space

I am currently working on Building a Lightning Component, i am facing issue of size of each grid when i put layout in it there sizes are changed, all i want exactly same square sizes of 6 grid with 2 ...
1
vote
1answer
38 views

Inline editing datatable - show edit button on hover (LWC)

My column entries look like this: <td aria-selected="true" class="slds-cell-edit" role="gridcell"> <span class="slds-grid slds-grid_align-spread"> <span class="slds-...
0
votes
0answers
17 views

SLDS via Node.js

I am trying to work with the Lightning Design System in a Node.js program and I have a question about the design tokens. What is the best way of either dynamically changing the design token values, OR,...
1
vote
0answers
31 views

Increase Modal height dynamically LWC

I've added some if conditions in the below Modal example however when the content is rendered I'd need to scroll the Modal down. https://www.lightningdesignsystem.com/components/modals/ Is there a ...
0
votes
0answers
18 views

How to rerender an output panel when the data becomes available?

I have a VF pages that takes on parameters, and when a "Search" button is clicked, a call is made to an external source. The returned results are displayed on an output panel that rerenderes after the ...
2
votes
1answer
28 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
32 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
34 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
21 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
10 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
31 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
22 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
42 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
100 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
81 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
42 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
344 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
233 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
24 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
50 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
88 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
119 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
68 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
52 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
104 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
29 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
28 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
16 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
133 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
101 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
40 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
214 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
92 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
65 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
80 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: ...
1
vote
1answer
135 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
46 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
145 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
348 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
96 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
463 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
159 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?