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
1answer
2k views

Sizing the layoutitems based on size of the top container and not the viewport

We have built a lightning component which is to be used on the record home page. Now the user can either add the component in the side or in the detail section itself. Everything is working fine ...
3
votes
2answers
998 views

Still trying to Close SLDS Dropdown Menu when clicked outside in Lightning Component?

I am trying to solve the same problem as this question here - How to Close SLDS Dropdown Menu when clicked outside in Lightning Component? There does not seem to be an official answer for this ...
0
votes
1answer
46 views

Lightning Design Classes Not Included on Visualforce page

I am using the lightning design system for creating a visualforce page. However some classes are not included in the slds.css. I have copied and pasted a 'Setup assistant' from the lightning design ...
1
vote
1answer
229 views

How to solve problem of updating css of lightning components with every release of Salesforce?

Lightning make changes in there css with every release. Most of time these changes were minor so we didn't make any changes. But like in summer 18 release there were big changes and we have to release ...
1
vote
1answer
276 views

How to position an element to center inside of a grid column?

On my VF page I'd like to center a content of a grid column. Code: <apex:page> <head> <apex:slds /> </head> <body> <div class="slds-grid ...
0
votes
1answer
134 views

SLDS -pageblocktable not responsive inside an outputPanel

I am using SLDS in existing VF page and I also want the page to be responsive. In the code below the outputPanel is responsive but the pageblock table within it is not responsive and it extends out of ...
0
votes
2answers
2k views

why my div is not hidden

What i try to do here is everytime when I click button. It should hide the div name review and show the div name comment. But now it's not working. It wont hide or show anything. Here is my cmp ...
2
votes
1answer
253 views

UI is not rendered properly. Problem with SLDS

I was trying to create a visual force page but I bumped into an error. SLDS style sheets which I Included in my code is not being rendered. As a result, the entire page looks ugly without CSS. <...
6
votes
3answers
645 views

Summer 18: SVG blocked in Lightning Components

The old approach of using a helper component to display SVG in Lightning now appears to be blocked in Summer 18. What is a bit alarming, though, is that even components marked with API version 40-42 ...
3
votes
2answers
369 views

How to stop the top of a tall SLDS modal from being clipped?

I am using the SLDLS modal styles as documented and in general they work well. Below are two screen shots where the first has a small amount of lines (<p>Line</p> repeated) but the second ...
1
vote
1answer
133 views

External stylesheet being applied to all components

I have a parent component in which there are multiple child components. I have included an external stylesheet in one of my child component using the following code : <ltng:require styles="{!$...
1
vote
1answer
382 views

How to make buttons responsive in SLDS?

I have some table written in Salesforce Lightning Design System. There are two buttons in leftmost column of each row, and I want to make these buttons smaller in mobile media. Fragment of HTML. <...
3
votes
1answer
11k views

lightning:layout horizontalAlign left and right

I want to make some part of components to left and some part to right. In the below markup, I want to make first lightning:layoutItem to align left and rest of it to align to right. How can I achieve ...
0
votes
1answer
117 views

Select List in slds limit

Is there any limit on how many options are displayed in slds SelectList? I see that a few values are not showing up in the select list. I have not specified any filter or anything as such <apex:...
2
votes
1answer
354 views

How can we detect and apply Lightning Experience defined Themes and Branding css styling in Lightning Application?

I'm looking to build a custom Lightning Application (not a Lightning Component). Now, SLDS base component does work nice, I've noticed that Themes & Branding applied theme color do not gets ...
0
votes
2answers
1k views

How can we show helptext of a field in VF page [duplicate]

I am using fieldsets to display fields in a VF page. Is there a way to display the help text icon next to the label if there is a help text associated with the field and display the text on hover? ...
0
votes
1answer
802 views

SLDS - InputField MultiSelect PickList

I am re-styling existing VF pages. I have an inputField that is rendered as multiSelectPickList. I tried using 'slds-dueling-list', but I am not sure the code is right. There is no example code on the ...
-1
votes
1answer
609 views

Why doesn't slds card styling show default background?

My code is wrapped in an and styled with slds-card; not sure why the background is transparent. How can I get the default background styling to show? <article className="slds-card"> ...
1
vote
2answers
494 views

How to present an icon that has a background in a lightning:tab label?

This component markup: <lightning:tab aura:id="tab" title="{# 'New or Existing ' + v.tab.label }"> <aura:set attribute="label"> <lightning:icon iconName="{# v.tab.iconName ...
0
votes
1answer
2k views

apex:pageblock convert to slds

As apex:pageblock is not supported in SLDS it's suggested to use slds-panel and slds-panel_section to replace page block and pageblocksection respectively. In my existing code I use rendered property ...
2
votes
0answers
441 views

Lightning Component Testing Code Coverage

I need some help here with lightning component testing. So I'd been building lightning component test on Salesforce using Jasmine testing framework. I was wondering if anyone here successfully ...
0
votes
0answers
75 views

ReRender issue in SelectList

I am facing issue with re-rendering the Select List, based on the option selected in another select list. This is a working piece of code in normal VF tags and styling. When I changed the VF page to ...
0
votes
1answer
123 views

SLDS in Visual Force - How to render a conditional div?

I have a slds-grid that I want to display conditionaaly I tried <div class="slds-grid slds-wrap slds-gutters" rendered="{on condition true}"> doesn't work, condition is correct. Tried using '...
0
votes
2answers
447 views

SLDS input does not bind record values on saving

I have a visualforce page to create a record. I use SLDS. Problem is, when i try to save record with filled form, the inserted data is not binded with new record. note: I use a standard controller ...
3
votes
1answer
411 views

Justify text based on width of column width lightning design grid (slds)

I have a lightning grid table in which I show some data. 1 of the values has a long text. How do I adjust this according to the max of the table width. Grid: <p><b>{!opleiding....
5
votes
1answer
2k views

lightning:input checkbox label with url

I have been tying to include "url/hyperlink" within a checkbox "label" using lightning input, but to no avail. Given is what I have tried and with the results, I want "Terms and Service" part of the ...
0
votes
2answers
325 views

slds popover not working in visualforce page

I am trying to make a slds popover, but when I put the cursor on a apex:image nothings happen, this is my code: <span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="...
1
vote
1answer
278 views

validation on onClick of apex:Commandlink

I am trying to validate a checkbox is checked on click of a apex commandlink. I am using SLDS styling on the page and the problem seems to be with the SLDS checkbox. I am using the below code as ...
0
votes
2answers
1k views

Spinner is being displayed properly but not removed on being called again

I have the following component code <div style="text-align:center"> <lightning:spinner aura:id="mySpinner" class="slds-hide"/> </div> and the following js helper code ...
3
votes
2answers
1k views

How to access SLDS icons from a lightning component Javascript controller?

I am needing a switch statement, and depending on the type of file uploaded, I want to change the background of the uploader to represent the file type (pdf, doc, txt, etc...). So, <lightning:...
0
votes
0answers
282 views

Lightning Design System UI responsive on browser window resize issue

I have developed UI with using SLDS responsive framework( https://www.lightningdesignsystem.com/ ) More over in entire application I have used lightning component ex: lightning:tabset (https://...
1
vote
2answers
553 views

Custom error message not being displayed in a table cell in lightning component

I have the following piece of code <aura:iteration items="{!v.wrapAccountList}" var="arItem" indexVar="index"> <tr> <td> ...
5
votes
1answer
422 views

Any way to introduce a separator into lightning:datatable row actions?

In SLDS there is a slds-has-divider_top-space style that allows a separator to be displayed between groups of actions: and this class can be specified in e.g. a lightning:menuItem. Is there any way ...
0
votes
1answer
62 views

Custom lightning component broke the formatting (overide CSS)

So I created a custom self-registration lightning component based off a standard component by using: implements="forceCommunity:availableForAllPageTypes" Once I did that, my formatting for the ...
0
votes
0answers
106 views

VisualForce Page onKeyup javascript not working after SLDS styling

I have a VFP that I migrating to Ligntning using <apex:slds/>. I have a js validate function onKeyUp() for an input Text. I know the javascript needs to be handled differently in such scenario. ...
0
votes
1answer
243 views

<apex:slds /> against static resource

I'm using SLDS datepicker on my VF page. I tried <apex:slds /> at the first place to load utility-sprite event icon to click and load the calendar. But it didn't load properly. Then i switched ...
3
votes
1answer
220 views

How do i have SLDS box align next to each other with same height

I know this is mostly related to css, but i just want to see if this can be accomplished using available classes in SLDS. Here is what i am trying to accomplish. I want to have 2 box side by side ...
0
votes
0answers
275 views

Re-orderable Listbox in Lightning

Does anyone know how to instantiate a re-orderable listbox in a Lightning page or component? Here is the description of the Re-orderable Listbox: https://www.lightningdesignsystem.com/accessibility/...
4
votes
3answers
4k views

How to create with SLDS grid system and lightning:cards some “full-screen” height cols and inner scrolls on overflow

First of all, I'm open to suggestions on how to make the title more descriptive ;) What I'm trying to achieve is to have a "full-screen layout" using the slds grid system but I don't know all the ...
7
votes
1answer
358 views

Unstyled Flows in Lightning Out

I have a static site, hosted in a AWS S3 bucket. The static site uses Lightning Out to load a component that contains a flow. I have included the SLDS stylesheet in the static site, and have ...
0
votes
2answers
2k views

Copy lightning experience background look and feel

I am developing a community and I would like it to look like lightning experience. One main thing is the background picture that is dissolving into blue - I want to achieve a background like this: ...
2
votes
1answer
381 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 ...
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 ...
0
votes
0answers
217 views

Parse a list Of wrapper class in javascript don't want apex:repeat [duplicate]

I have a list of wrapper class list tempList public class employeeBookedClass{ public string locationName; public string locationDate; public string trainerName; public string ...
3
votes
1answer
561 views

Lightning Out SLDS Weirdness

I am trying to load a lightning out app in a static site hosted via an S3 bucket. I started with a lightning app that extends ltng:outApp and it describes a single component as a dependency. The app ...
6
votes
1answer
129 views

Locale Supported Format For Visualforce Input Field

I've been rewriting a Visualforce page to use SLDS styling. Part of this requires rewriting dynamics DateTIme fields to SLDS Date time picker. This therefore means writing the Date part of the ...
1
vote
0answers
194 views

How can I specify an SLDS icon for the icon attribute of QuickAction

Are the SLDS icons exposed as static resources (without a manual upload)? Is there a syntax for referencing the the SLDS icons, as static resources, from metadata? I am creating a QuickAction using ...
6
votes
1answer
2k views

Lightning: How to open a newly-added accordion section?

Assume the following pseudo-markup: <component> <attribute recordList/> <button label="Add" onclick="{!c.addRec}"/> <accordion> <iterate over recordList ...
1
vote
0answers
40 views

Opening another VF page from Lightning Experience 's VF Page

We have migrated a VF page from Classic to Lightning and it is working fine. In this page, we need to open another page on a click of a link. So, we have written code as below : <apex:outputLink ...
1
vote
2answers
3k views

Lightning Component File/Image Upload and having it show up in Notes & Attachments

I am trying to pop open a modal form with an input to upload a documentation image on it. Everything else on the form is working perfectly fine, I just had a last minute ask to add this file input ...