Stack Exchange Network

Stack Exchange network consists of 174 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

Button Placement Woes

I'm trying to get the Back to Salesforce button centered and all the way to the right. I've tried float:right, padding-which just makes the black header larger, and vertical align (though maybe I've ...
0
votes
2answers
27 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
23 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 ...
0
votes
1answer
17 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
42 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
165 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
16 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
21 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-...
0
votes
1answer
63 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
33 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
28 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 ...
0
votes
0answers
17 views

How to call Prompt message in VF SLDS page from Controller

I have a VF page that has the SLDS styling. The page is being triggered from a button on a Case object. I would like to display a message as soon as the page is loaded, if the Case Contact email is ...
2
votes
1answer
22 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
63 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 ...
0
votes
0answers
16 views

Dynamic Input Fields not showing Datepicker in Visualforce with SLDS

I have Input Date fields like this, <div class="slds-form-element sld-m-top_medium"> <label class="slds-form-element__label" for="txttestdate">Date of Birth *</label> <div class="...
0
votes
1answer
28 views

Lightning Vertical Navigation: CSS for list item to be align to the right

I have a vertical navigation that is populated from a list of records, for each item I am trying to add a span with some extra information (in this case a badge), but I want to be pull to the right (...
3
votes
1answer
71 views

What does SLDS CSS class `.slds-hint-parent` do?

SLDS and lightning component documentation regularly uses CSS classes in example code without reference in accompanying documentation. So, for example, I'm trying to understand .slds-hint-parent, ...
0
votes
1answer
34 views

Label lightning input hypertext [closed]

It is possible to render clickable label of a lightning input of the checkbox type? <lightning:layoutItem size="12" class=""> <lightning:inputaura:id="fieldCheckbox" name="terms" type="...
0
votes
0answers
35 views

The vertical line of “.slds-timeline__media:before” does not appear when using Activity Timeline on Lightning Component Tab page

The vertical line of ".slds-timeline__media:before" does not appear when using Activity Timeline on Lightning Component Tab page. <aura:component> <ul> <li> ...
3
votes
1answer
144 views

Lightning: <table> with dynamic column count, want fixed width columns and scrolling instead of automatic resizing

thanks as always, you dudes are the wind beneath my wings. What I have: A <table> that initializes with 2 columns, and a button that adds an additional column with each click (table is built ...
0
votes
1answer
18 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 ...
2
votes
0answers
20 views

slds themes not applied in lightning communities

I tried using slds themes for applying a light gray background color to a certain section of my layout,, It works fine in LEX, however, I require this form to also be used in lightning communities. ...
0
votes
1answer
109 views

lightning:input vertical alignment in table cell

Hi, I want to create a table in my lightning component. I created 2 lightning:input fields and want to change the vertical alignment to "middle" but it does not work. I tried to do the following: &...
0
votes
0answers
25 views

Lightning SLDS stylesheets on visualforce SITE

I have an issue with styling visualforce page that will be exposed as a site with lightning SLDS stylesheets. I'm using lightningStylesheets="true" on my page and if I preview it in salesforce ...
0
votes
2answers
35 views

Allign button at the same level of input field

I want to allign create button at the same level of input field i.e exact right side of the input field, in the same line. In the below code, it is coming at below level of the field <div class="...
2
votes
1answer
57 views

VisualForce page displaying in Lightning with no style [closed]

I was trying to use a lightning spinner on a visualforce page, I got it working by changing a few things: I added <apex:slds />, changed the api number, and set applyBodyTag. I think that's all ...
1
vote
1answer
24 views

How to put css swatch inside lightning select

I have a lightning select dropdown which iterates over a list of objects containing colour details, specifically the colour label and it's HEX value. I want to be able to display the hex value as a ...
2
votes
1answer
48 views

Lightning Design System component for dashed separator line?

Is there a Lightning Design Component that will generate a dashed separator line like what you see for the Next Steps and Past Activities sections in the standard Opportunity record page? (I don't ...
2
votes
0answers
30 views

SLDS Assets global variable not working from Visualforce?

I'm blowing through some Trailheads and this bit is not working: <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5....
0
votes
0answers
11 views

How to make a Visualforce page width aware when using SLDS styling?

I have a Visualforce page containing a table of individually assembled data cells. When I display the page in a Lightning component, I use attribute lightningStyleSheets="true". My VF page is now too ...
0
votes
1answer
14 views

I'm making a checklist and I would like this data to be updated/inserted using an iframe or any alternative method Ask Question

So This here is my check list and above it is where my Iframe should display. From my understanding it is not being displayed because of "Clickjacking" protection. Is there any way I can display my ...
1
vote
1answer
121 views

Insert a link in lightning datatable Column Value

I am trying to insert a link in a result column of lightning:datatable Below is the code snippet : Datatable Code: <lightning:datatable data="{! v.contactList }" columns="{...
0
votes
1answer
25 views

Current Record is available in doinit method but not in button handler method

I am able to get the current record id of a record in my controller method written for doinit, but I have another method for handling a button click, I could not get the current record id. I am ...
0
votes
0answers
31 views

How do I set the Default Size & Layout of a MultiPicklist on my VisualForce Page?

I'm wondering how I go about changing the style of my Multi-Picklist? I would Like it expanded by default without the scroll bars. So its showing all the options. This is how it looks when I open the ...
0
votes
1answer
31 views

Anyone know how to remove/hide the [ 00/00/0000] Date from the date input field?

I'm just wanting to hide/remove todays date at it serves no purpose in my form any idea how I do this?
2
votes
0answers
221 views

Can Lightning SLDS icons be displayed in formula field without using static resources?

I want to display an icon in a formula field based on the value in another checkbox field on my object. I would like to use the standard Lightning SLDS icons here. I've found a way to achieve this ...
0
votes
1answer
22 views

Is it possible to have different layouts for VF Pages? Eg. Printed Copy and Digital?

Is it possible to have a different print view so I have functionality on paper? This is the multi pick list form but once printed it has no functionality (Such as the scroll, I would just need check ...
1
vote
2answers
89 views

SVG Polygon Shape in Lightning Component using SLDS

I created a Div using HTML/CSS to look like: Below is the Code: HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head&...
4
votes
1answer
382 views

SLDS lightning card margin issue

When lightning cards render, the first one seems to always be missaligned at the top no matter what. (this is obviously fixable with CSS). I used dymamic rendering, standard lightning:Card component ...
3
votes
1answer
50 views

Tooltip over range slider

I'm currently working with a range slider that has steps on it. Is there a way to do a tooltip above each step? Here's the current slider code. So at every step I need to put the tooltip over the ...
1
vote
2answers
52 views

Visual Force Page Grid CSS

I have been using the SLDS styling and I cannot in anyway get the styling correct for this very simple section. I have an apex:form with an apex:pageblock with apex:pageblocksection and apex:...
1
vote
1answer
163 views

Remove border-radius on <lightning:input/>

Is it possible to remove border-radius on <lightning:input/>? Just attaching a css class with border-radius: 0; does not help.
-1
votes
2answers
59 views

Displaying Checkbox right side of the label

I'am very new to slds.I have used Lightning input type tag for displaying the checkbox.Now checkbox is Appearing in left side. Present Image: <lightning:input type="checkbox" label="Selected :"...
0
votes
1answer
88 views

Position submit button of the lightning:recordEditForm in the footer part of the modal window in slds [duplicate]

Is it possible to position submit button of the lightning:recordEditForm in the footer part of the modal window in slds? The problem is that the button should be between the lightning:recordEditForm ...
0
votes
1answer
32 views

Using Salesforce Media Objects

I want to display an image of a user with text right next to the image. Went through SLDS and found Media Objects to fulfill my need. Been trying to implement it but the text is always under the image....
3
votes
0answers
132 views

Submenu inside lightning:buttonMenu component

I have a lightning:buttonMenu with a few lightning:menuItem and want to display a submenu when hovering over one of the options. Having a hard time understanding how to create a submenu. Was ...
4
votes
1answer
327 views

How to use slds illustration?

I looked into this to use illustration in my component. https://lightningdesignsystem.com/components/illustration/ As we can't use svg tag in lightning component, so is there any way by which we can ...
6
votes
2answers
391 views

Will Lightning Base Components fully replace SLDS?

I've noticed that certain Lightning UI features have equivalents across Base/UI Components and SLDS, such as modals. But, some don't. I haven't seen a base-component equivalent of Checkbox Buttons, ...
0
votes
1answer
21 views

Trying to override Description Horizontal List

I'm using the Description Horizontal List from SLDS. My code so far : <dl class="slds-dl--horizontal"> <dt class="slds-dl--horizontal__label"><b>Hello1</b></dt> ...
1
vote
1answer
55 views

How to use SLDS Icon in Visualforce Component [closed]

I have tried to used below code in Visualforce Component <img class="slds-checklrt" src="{!URLFOR($Asset.SLDS,'assets/icons/utility/check_60.png')}" style="width:20px"/> but not getting much ...