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
0
votes
1answer
465 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
169 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
1k 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
825 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
374 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
78 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
450 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
467 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
2k 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
421 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
550 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 ...
5
votes
2answers
3k 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
38 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
66 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
528 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
237 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
85 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
213 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
247 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
524 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
1k 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
435 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
271 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
3k 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 ...
1
vote
1answer
445 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
88 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
2k 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
98 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
2k 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
187 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
202 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
972 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
66 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
1answer
21 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
1k 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
37 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
48 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?
3
votes
0answers
1k 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
290 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
3k 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
181 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
370 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:...
2
votes
1answer
1k 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
1k 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 :"...
1
vote
1answer
617 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
94 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
580 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 ...
8
votes
1answer
2k 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
555 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, ...

1 2 3 4 5 8