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

Extending/implementing force:slds at component level

With Lightning most of my use case has been creating a component and adding it to the Lightning app builder page. I use just to preview my component behavior from developer console. Having said ...
0
votes
0answers
519 views

How to use SLDS CSS as hosted Static Resource in Web-To-Lead

So I am creating a web-to-lead form but I'd like to use the SLDS CSS. I uploaded the SLDS zip to my Org as a public facing static resource. However, when I put it in my HTML page it's not working. (!...
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="...
3
votes
0answers
392 views

Loss of Lightning Card style on reRender of outputPanel in Visualforce

I have a visualforce page that gets initially loaded, then an action function is triggered that does a webservice callout. Once the action is finished and the output panel rerenders, I am losing the ...
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 ...
0
votes
2answers
523 views

SLDS Header row with full height left and right div

Trying to use the grid system to do something similar to the following: =================================HEADER ROW Size 1 of 1=========================== + + + ...
0
votes
1answer
374 views

How to dynamically add SLDS class to VF page div tag

On click of a button, I want to dynamically add 'slds-has-error' class to a div around an element. My markup is as: <apex:form id="theForm"> <!-- divContainer --> ...
4
votes
1answer
190 views

About table and SLDS

We're working in a wizard implemented in angularjs + slds. There's an autocomplete widget based on [angucomplete-alt] component and the component is embeded in a <table>. But when the user types ...
0
votes
2answers
870 views

SLDS Lightning static Resource not loading

Am trying to apply CSS for a page using SLDS which is refered from static resource but am unable to make it work. Please help Am refering the above resource in .app page as below <ltng:require ...
0
votes
1answer
194 views

Scoped tabs displayed as unordered list

I am facing an issue with displaying scoped tabs. I am referring the link: https://www.lightningdesignsystem.com/components/scoped-tabs/ as I want the tabs to display as per the link. But my tabs are ...
1
vote
2answers
1k views

SVG icon inside commandbutton (in VF page) does not show up. Instead it appears next to commandbutton

This is the code for commnad button in the Visualforce page. <apex:commandButton action="{!searchEmps}" styleClass="slds-button slds-button_brand slds-button__icon" Value="SEARCH" &...
1
vote
1answer
716 views

How to get the value of a standard html input checkbox in a Lightning Component controller?

In order to obtain the standard styling of the Lightning Design System, I've used in one of my components the following HTML to render a simple checkbox, that can be found in the standard docs too: &...
3
votes
0answers
415 views

How to leverage new Dynamic Icons from SLDS

Interested in trying to use the new Dynamic Icons (https://www.lightningdesignsystem.com/components/dynamic-icons/) from SLDS in a Lightning Component but can't quite figure out how... Do I need to ...
6
votes
2answers
23k views

SLDS table with fixed header

I'm implementing SLDS table in lightning component where you load more data on vertical scroll and it would be nice to have headers fixed. The code that I'm using is pretty much as in the slds docs: &...
0
votes
2answers
3k views

Arrow sorting on columns - client side

From the backend I am getting an Array of Objects {Object, Object,......} I did sorting of the datatable and it is getting sorted but there is some issue with arrow. Below is the code written: Aura ...
-2
votes
1answer
42 views

Cannot supply Id from javascript variable to an apex attribute [closed]

<script> var idForDropDown = someValue; </script> <ul class="dropdown-menu" id="'+ idForDropDown + '"> </ul> When I check the id it takes idfordropwdown as a string ...
0
votes
0answers
437 views

Sorting Date column on Client side

I have an array of objects {Object, Object, ...}. I want to sort the Date column. Let's say below are some cases: Case-1: { "2020-05-26", "2018-06-26", "2019-06-15" ,"2018-07-05" ,"2018-07-05", "2017-...
0
votes
1answer
757 views

Sorting of DataTable on Client side in Lightning

I am sorting an Opportunity with its Name, Amount, Stage, Owner(All are in a data table as Columns). Now I want to sort (Ascending or Descending) the results on the client side when I click on the ...
0
votes
0answers
216 views

SLDS - Cannot add class for toast notification theme

I have a toast notification and I'd like to add slds-theme--success and slds-theme--error to them based on success or failure of data entry. The adding and removing classes in JQuery are not working. ...
2
votes
0answers
303 views

Visualforce Page Styled with SLDS, <apex:input /> is enforcing a pattern on the data input

Background: I have recently built a Visualforce page, styled with the lightning design system, for inserting an editing line items on a record and found an following issue upon trying to edit an item....
0
votes
2answers
6k views

How do I make a lightning:button expand horizontally to fill a div?

Is there any way to make a lightning:button expand horizontally until it fills the boundaries of its div? I've been trying for ages but nothing I try works, is it possible or is salesforce still ...
2
votes
2answers
2k views

How to use <html xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink” lang=“en”> 04

I was going thru Trailhead module in SDLS. There it is mentioned <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> Can someone tell what is the ...
1
vote
1answer
299 views

Community Lightning App not responsive on devices though acts responsive on resizing PC's browser

I have built a custom Lightning App with different multiple components and pages that I am using in my Salesforce Community. Now, when I 'decrease' the browser to a mobile size, it resizes and goes ...
0
votes
1answer
420 views

How do I change the background of a checked ui:inputcheckbox?

I am trying to set the background of my checked checkbox. This is the code: <div class="slds-form-element__row"> <div class="slds-form-element"> <label class="slds-...
0
votes
2answers
102 views

Style <ui:inpucheckbox> with SLDS

How can we apply slds to <ui:inputcheckbox>.I tried using <ui:inputcheckbox class="slds-checkbox" value=""/> but no hits.I want to style the checkbox as of SLDS. Also i am using other way ...
-4
votes
1answer
63 views

SLDS Example required [closed]

I am a newbie into lightning and want a good example to understand lightning. Can someone post good example or use case . I have already tried application and component events. What I wish to learn ...
1
vote
1answer
788 views

How to use SVG and USE tags? Aren't they deprecated?

I am stuck at 1 place where SVG an USE are used. I got to 1 link Mentioned below which says : This method is deprecated. https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-...
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
77 views

Using two styles in class attribute of HTML Table is not working Properly

I am using both jquery plugin and slds in class attribute of html table. Jquery plugin is used for Search and Pagination option But using both in a single class attribute does not work always....
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" ...
0
votes
1answer
118 views

how to populate SLDS date value in edit mode using javascript

I have a date field <div class="slds-form-element"> <label class="slds-form-element__label">Date of Birth</label> <div class="slds-form-element__control"> <...
0
votes
3answers
1k views

How do I read out the value of my checkbox?

I can't figure out how to read out the value from a checkbox. See my code below. Is there someone who can give me some tips?
2
votes
1answer
384 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,...
1
vote
2answers
2k views

Focus box on lightning:input

When the input element is 'focused' (currently selected/tabbed) , Chrome puts a blue border around it. And I just can't figure out how I can get this away. I think the browser is putting it there. But ...
0
votes
1answer
519 views

Global Action on a Visualforce Page

I am currently building a VF Page using SLDS and Angular JS to be used on lightning experience. I would like to know if there is a way to use the Send Email Global Action on the Visual force page, ...
1
vote
1answer
123 views

Lightning design css overwrites header styling

When using the latest lightning design css on a visualforce page the styling overwrites the standard styling in the header. Is there any way around this happening?
4
votes
2answers
707 views

Tooltips Not Displaying in Modal Content

I'm having big problems trying to display tooltips inside of a modal container. Picture below demonstrates what's going on. On top, I've stuck my tooltip component inside of the modal container: &...
2
votes
2answers
284 views

Lightning Design system elements

This might be a very silly question, but I wanted to make sure that I am not doing anything wrong. I am using SLDS to design all my components and has been using js to add necessary classes to ...
1
vote
0answers
159 views

Issue with sales process 'slds-is-Complete' state

With help of slds sales process as specified in the link: https://www.lightningdesignsystem.com/components/process/#flavor-sales-path-coach-different-coaching I'm trying to build my own process ...
0
votes
2answers
1k views

How to make my modal popup to open as panel in salesforce1

I have created a modal popup in lightning using slds but I want my modal popup to open as a panel in salesforce1 app because my modal popup does not look good in sf1 app. How can I make my popup to ...
2
votes
1answer
355 views

SLDS classes not working

I am new to this SLDS classes . The button group icon is not working . The UI renders perfectly but the event are not getting fired . Am I missing something . Here is the link . Thanks in Advance.
0
votes
1answer
219 views

SLDS classes issues

I am working on design using SLDS classes , I am using Discussion Feed here is the link . The icons for attach file and add user are not working. What am I missing .
0
votes
0answers
987 views

How to implement Column Resizing in a Data Table in Lightning Component?

Is there any kind of JS function that we can leverage to allow resizing of a column in lightning component? Using 3rd party jQuery libraries are too funky with Locker Service, they would work one day, ...
1
vote
1answer
428 views

How to get the “inverse” style using a lightning:buttonIcon?

This Lightning Design System Button Icons example produces an "inverse" icon - a white icon on a dark blue background - that in Lightning Experience appears to be used to indicate a selected button: &...
3
votes
1answer
275 views

Lightning create sticky button

When I was discovering my Salesforce, I found that if you trigger an inline edit on standard record view, the whole component becomes editable and button "Save" and "Cancel" are sticky to the bottom ...
0
votes
0answers
966 views

Div tag alignment in slds

I am trying to display two column table format where my first column is lengthy and second column content is very less. I am using the below code to display but since first column is lengthy(...
1
vote
2answers
346 views

Spinner display getting delayed based on number of records being displayed on the current component

I have 2 lightning components. I am displaying list of parent on the first component. when I click on the any specific parent I am displaying all associated child for that parent in the 2nd component. ...
2
votes
1answer
948 views

How to make slds page input box half the width

So what I am trying to achieve is something like below: Please note that the Transcript date, Is Replacement and Part Submitted are 50% width. I tried with the following code: <...
0
votes
0answers
377 views

force:inputField displays in .app but not in .cmp

So I have multiple picklists I wish to dynamically display on my lightning component. But when it does not render at all on my component. I moved the code over to my .app and it displayed 100%. Im ...
0
votes
1answer
120 views

Can a non-selectable menu heading be created using lightning:menuItem?

This Dynamic List SLDS example has a nicely formatted "MY FAVORITES" heading that is not selectable and does not highlight. I'm using the lightning:buttonMenu (Beta) and lightning:menuItem (Beta) ...