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
2
votes
0answers
83 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
70 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
375 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
373 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
267 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
108 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
764 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
446 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
278 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
63 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
328 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
277 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
1k 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
210 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
386 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
2k 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
36 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
47 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
1answer
441 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
155 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
73 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
136 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
206 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
1answer
325 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
765 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
294 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
196 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
2k 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
329 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
58 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. ...
1
vote
1answer
1k 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
73 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
1k 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
148 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
94 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
490 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
55 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
19 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
19 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
855 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
31 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
1answer
40 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
946 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
23 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
218 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
2k 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
151 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
278 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
705 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.
0
votes
2answers
753 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 :"...