Episode #125 of the Stack Overflow podcast is here. We talk Tilde Club and mechanical keyboards. Listen now

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
26 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
17 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 ...
0
votes
1answer
32 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
24 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
30 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 ...
1
vote
1answer
20 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 ...
1
vote
1answer
720 views

How to get the value of a standard html input checkbox in a Lightning Component controller?

In order to obtain the standard styling of the Lightning Design System, I've used in one of my components the following HTML to render a simple checkbox, that can be found in the standard docs too: &...
0
votes
1answer
70 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 ...
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
1answer
144 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
2answers
39 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
56 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
357 views

Trouble Saving MultiSelect Value

I found a code somewhere for multiselect. Here's the component code: <div aura:id="main-div" class=" slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click" > <button ...
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="...
3
votes
1answer
1k views

Lightning styling of multi-picklist in visualforce page?

was wondering if anyone had any suggestions for how to do styling of a multi-picklist in a lightning manner within a visualforce page? <apex:repeat value="{!$ObjectType.Surgery__c.FieldSets[fixed]}...
3
votes
1answer
195 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 ...
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 ...
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.
2
votes
4answers
1k views

DateTime Picker using SLDS

I want to display a Datetime picker using Lightning Design System. So far, I am just able to display Date picker using SLDS and Appiphony Lightning JS. More details : Date picker using Appiphony ...
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 ...
2
votes
1answer
362 views

Display path from right to left

I want to display a field status in a very visual way, the path component is ideal (any of them, for example lightning:path or even the slds one): Problem: Displaying that component from right to ...
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
2answers
1k views

How to make my modal popup to open as panel in salesforce1

I have created a modal popup in lightning using slds but I want my modal popup to open as a panel in salesforce1 app because my modal popup does not look good in sf1 app. How can I make my popup to ...
0
votes
3answers
67 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"> ...
5
votes
4answers
4k views

How to set autocomplete=“off” in lightning form

The Problem I am trying to set the HTML attribute auto-complete="off" on an input element with the class slds-input. For some reason the template always converts this to autocomplete="true" in ...
6
votes
1answer
3k views

Difference between lightning:button & ui:button

I was going through the SLDS document and couldn't understand the difference between various UI components provided by SLDS vs Lightning components. For instance, <ui:button> & <...
0
votes
0answers
87 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
2answers
532 views

SLDS Header row with full height left and right div

Trying to use the grid system to do something similar to the following: =================================HEADER ROW Size 1 of 1=========================== + + + ...
1
vote
4answers
857 views

To display a prompt notification (Lightning design system)

The input field takes in a name and on the click of the 'submit' button, it saves this new account name. But if the input field is empty, then the program should display a prompt which says "error" ...
0
votes
1answer
60 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
1answer
682 views

Radio button and pick list fields value is not getting stored in the salesforce org

After finishing the basic lightning component trail I started writing another component of my own choice and when I hit the submit button I get the below error if I cut out the pickList field and ...
0
votes
2answers
46 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
86 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
27 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
15 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 ...
3
votes
1answer
1k views

lightning:treeGrid Conditional Action(button) column

We are trying to build a Hierarchical view of records using lightning:treeGrid and based on value from a field in each record, the button in action(button) column should change. Let's Say we are ...
1
vote
2answers
538 views

Checkbox group in lightning design system

I am trying to use checkbox group in a customer facing page using lightning design system styling. The output should look something like this. I tried using multi select picklist but the rendering ...
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
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 ...
0
votes
2answers
586 views

How to use custom fonts in Salesforce Lightning Design system

How i can use custom fonts in Salesforce Lightning Design System. As of now i am using default font provided by SLDS. Is there any way to override default fonts on visualforce page using css/...
1
vote
2answers
263 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
522 views

Global Action on a Visualforce Page

I am currently building a VF Page using SLDS and Angular JS to be used on lightning experience. I would like to know if there is a way to use the Send Email Global Action on the Visual force page, ...
0
votes
0answers
37 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 ...