Stack Exchange Network

Stack Exchange network consists of 175 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
16 views

How to validate the <apex:inputfields> on form submission and show error using SLDS?

I am using SLDS in a VF Page and I am referring to this link here to show error. The problem is the error is displayed on page load because I am not removing the Slds-has-error class. But, how do I ...
2
votes
1answer
26 views

Way to preview slds classes

Is there a way to preview how a component will react if I add a new slds class to it? I am new to Lightning component development, doing my development in VS Code and using scratch orgs. Currently I ...
0
votes
0answers
15 views

Show error when user has entered value and removed it or field is empty while submitting the form in SLDS

I have a few input fields on the layout and all of them has slds-has-error class to get the red box along the field and displaying field is required text beneath the field. However, my problem is, ...
0
votes
0answers
17 views

Use the Salesforce Lightning Design System to Style Visualforce Pages Issue

Working through the Visualforce Mobile module I want to do an exercise (3rd unit) that consists of displaying the contacts their names and phone numbers. <apex:page showHeader="true" sidebar="...
2
votes
1answer
21 views

Showing error using SLDS Has Error on Apex:Inputfield with Aria-describedby

I am using the SLDS in visualforce page and trying to display error next to the component by following this. But aria-describedby does not work with <Apex:inputfield> and throws error. Here's ...
0
votes
1answer
29 views

SLDS Spinner with backdrop on VF Page on Button click [duplicate]

I am trying to add a spinner with a backdrop as the loading screen but the spinner is not working when the action function is invoking. Action function is able to call the apex method but not invoking ...
0
votes
1answer
33 views

Table row LWC breaking SLDS styles

Situation I'm building a table row LWC to separate and encapsulate some logic like so: <!-- tableComp.html --> <table class="slds-table slds-table_cell-buffer slds-table_bordered"> &...
0
votes
1answer
46 views

LWC lightning-button-menu alignment

I use lightning-button-menu component and would like to align the menu top. I found that it can be aligned left or right, but it there a possibility to align top? <lightning-button-menu ...
0
votes
0answers
19 views

Space between columns in a grid - not symmetric

In the simple bellow grid I would like to separate colons with a small blank.For this i use the class slds-gutters on the grid. The problem is that it also put a blank after the last column of the row ...
0
votes
0answers
39 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
1answer
41 views

I need a grid with 7 equally spaced columns

I'm trying to use lightning-layout and lightning-layout-item to get a row with 7 equally spaced columns (no matter the contents) that fills the full width of the container. slds-grid is useless ...
2
votes
0answers
35 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
32 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
83 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
46 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
53 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
48 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
553 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
136 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
162 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
45 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
169 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
106 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
464 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
61 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
206 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
895 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
31 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
28 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
311 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
61 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
37 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
60 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
136 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
190 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
373 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
109 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
83 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
944 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
195 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
28 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
604 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
47 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
326 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
86 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
39 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
182 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
39 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
12 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
16 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 ...