The Stack Overflow podcast is back! Listen to an interview with our new CEO.

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
12
votes
3answers
9k views

How to convert a Visualforce apex:pageMessages to be lightning style

During my working on converting existing pages to be lightning experience style (as known as slds style). One of the challenges I have faced is to convert <apex:pageMessages/> . Usually the ...
14
votes
5answers
9k views

Lightning Design System is overridden by styles from app.css

Some of the CSS styles from Lightning Design System is overridden by styles from app.css which is loaded as a part of Salesforce1 app. We are facing some issues with this. Description of Issues: In ...
7
votes
2answers
900 views

Lookup Field Dual Keyboard Focus (Answered with working Autocomplete lookup component and JS example for VF/SLDS)

The SLDS docs describe: Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to ...
4
votes
2answers
4k views

Issue in Lightning desing System modal component

I have developed new Modal using lightning desing system.In standard modal new button pop up appears on whole broweser lightning page. But when I desgined using SLDS it will come up but still ...
6
votes
1answer
5k views

SLDS and inputField checkbox

So, the SLDS says that a checkbox must be done like this: <div class="slds-form-element"> <label class="slds-checkbox" for="checkboxSample1"> <input name="checkbox" type="...
2
votes
2answers
2k views

How to assign dynamic Ids for ui:inputDate element inside aura:iteration?

As title says, How do I assign dynamic Ids for ui:inputDate elements inside aura:iteration? Here is the reproducible version of the problem I am facing: HelloWorldApp.app <aura:application > ...
14
votes
3answers
5k views

apex:slds vs lightningstylesheet option

What is the benefit of using <apex:slds> vs specifying the lightningstylesheet attribute on your <apex:page>? These links talks about both but I don't understand the difference apex:slds ...
3
votes
2answers
1k views

Lightning design system - SVG disappears after rerender

I am building data table, here is html code from browser before rerendering table. I use actionFunction with rerender attribute. The problem is that svg disappears after rerendering. Before rerender: ...
7
votes
1answer
9k views

Lightning client side sorting

component.set("v.Accounts", Accounts); has the accounts that I need. <th scope="col"> <div class="slds-truncate" title="Opportunity Name" onclick"{!sortbyOpportunityNAme}">...
3
votes
2answers
1k views

Close Lightning Modal by clicking anywhere outside of it

Just wondering whether this is possible? i.e. once a modal is open, close it by clicking anywhere on the grey backdrop? I've tried invoking my custom close-modal function via: - Adding onclick to the ...
7
votes
3answers
6k views

Summer 18 - Lightning input variant label-hidden hides the label but occupies the space for label

I am trying to include lightning:select component in a table row. But I don't want to show the label for select input. I am using variant="label-hidden", which hides the label, but the space for the ...
5
votes
3answers
1k views

What Scoping Class Will <apex:slds> Use?

In reading through the release notes I was excited to discover the introduction of a new <apex:slds> tag. That should help lower the barriers to entry! However, the release notes do not specify ...
4
votes
2answers
6k views

Lightning Component Styling on UI Components

I'm wondering why my ui:button components aren't rendering correctly. This is what the button is supposed to look like but when I try to style the ui:button component it looks like this: the ...
10
votes
1answer
4k views

AuraClientService.postProcess: error in processing [RangeError: Maximum call stack size exceeded] - Client Side Action

I have a lightning component that is using ui:inputSelect. The component code: <div class="slds-form-element__control"> <ui:inputSelect class="slds-select" aura:...
4
votes
5answers
8k views

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

I'm familiar with the stuff that SLDS is CSS framework, and know that we need to incorporate our own JS to implement additional logic, which I can easily do in VF pages with jQuery etc, but I'm ...
1
vote
1answer
790 views

Anybody Implemented pagination using SLDS

I have to implement pagination by using SLDS. I didn't able find any example of pagination. Please provide example?
1
vote
1answer
982 views

Convert apex:selectCheckboxes into slds style

Say I am having the below code: <apex:selectCheckboxes value="{!SelectedLists}" styleClass="convertToLSD" layout="pageDirection"> <apex:selectOptions value="{!...
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: &...
9
votes
3answers
18k views

Lightning : Icon color is not changing using the fill CSS

According to the documentation (https://www.lightningdesignsystem.com/components/icons/ ) we can change the icon color by suing the CSS. I am not able to do it. It always overrides with the Salesforce ...
7
votes
1answer
5k views

Lightning (SLDS) styling for calendar

I have designed a VF page with SLDS, which has a calendar field, how could I replace the current date proportion of the calendar field with some image/icon using SLDS? or any other solutions? Please ...
13
votes
2answers
3k views

Unknown component apex:slds

When I am trying to use Salesforce Lightning Design System in my vf page, I get error - Unknown component apex:slds while including <apex:slds /> on my vf page. Unrelated - I have also tried ...
5
votes
4answers
4k views

How to set autocomplete=“off” in lightning form

The Problem I am trying to set the HTML attribute auto-complete="off" on an input element with the class slds-input. For some reason the template always converts this to autocomplete="true" in ...
4
votes
2answers
2k views

Word Break - Lightning

I want the string to be transfered to the next line in lightning. In salesforce classic I would just apply to the element style="word-break: break-all". In lightning there's a special tag for that. ...
2
votes
1answer
385 views

I am trying to use slds classes by extending app extends=“force:slds” but the slds classes are not being loaded

I am new to Salesforce development, am trying to include slds classes in my component That's my application and component am trying to include the padding classes in my component slds-p-top_xx-small,...
2
votes
2answers
1k views

Lightning component with SLDS

I try to build a lightning component with SLDS, lightning design system. The component I want is the tabs. So I use the code given by lightning design system, but since it is static i need to use ...
2
votes
1answer
5k views

Show Lightning component Modal above Salesforce Global header (Position Issue) [duplicate]

I have added lightning Modal (slds) component A in a another Lightning Component B. Lightning component B is used to create Lightning Tab. Now when I show the modal, Position of Modal component A is ...
0
votes
1answer
2k views

What is the alternative for <apex:enhancedList> for lightning design system in order to get look and feel like Lightning List View?

I have a Visualforce Page tab where I have used <apex:enhancedList>for displaying list view of my custom object like follow:- <apex:enhancedList type="customObject__c" height="500" ...
8
votes
1answer
1k 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
1answer
256 views

slds-order--# only works up to 12 items?

I have a section in my app where I'm allowing the user to turn on and off various "tiles" of data, which are displayed vertically. I always want them displayed in a certain order, so I use the slds-...
3
votes
1answer
489 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 ...
3
votes
2answers
3k views

Lightning SVG Icon Component Helper - SVG class not being set

I am quite lame with CSS, but noticed something about this helper. var classname = component.get("v.class"); var containerClassName = [ prefix+"icon__container", prefix+"icon-"+category+"-"+...
2
votes
1answer
2k views

Allow to enter percentage values between 1…100 with lightning:input

I am unable to configure a lightning:input to allow a user to input 50 when he wants 50%. It always does strange conversions. Please provide me with a <lightning:input type="number" formatter="...
1
vote
0answers
247 views

How to make a tooltip pop out of it's container

I'd like my tooltip to pop out of it's container, but unfortunately it gets clipped off. Any suggestions about styling that would give me my desired result: My actual result: My code: var ...
1
vote
3answers
405 views

How to fix arrow areas rendering in the wrong color in an slds-path?

I'm writing a Lightning Component that renders an SLDS Path based on some custom configuration data (so I can't use the lightning:path component). A few weeks ago a colleague tried this out and couldn'...
1
vote
1answer
5k views

How do I make a SLDS checkbox default to appear checked?

I've built a Salesforce Lightning Design System page with some checkboxes on it. The way SLDS implements checkboxes looks really odd to me. I'd like to make one of those checkboxes to appear checked ...
0
votes
1answer
640 views

force:inputField is not displaying inside a slds-modal dialog box; Lightning in Visualforce

I'm developing lightning components inside visualforce pages using slds styling. My requirement is to display a input look-up field inside a dialog box. Lightning Component: <aura:component> ...
0
votes
2answers
894 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 :"...