Questions tagged [lightning-design-system]
Questions related to Lightning CSS Framework called Salesforce Lightning Design System or SLDS for short. Specifically questions on how to use, getting certain features to work, and questions related to any of the suggested code or use cases on the Lightning Design System Website: https://www.lightningdesignsystem.com/ Lightning Experience UI, Lightning Components, Visualforce, and Lightning App Builder are all different but related tags.
889
questions
2
votes
1
answer
2k
views
How to set only Time for ui:inputDateTime tag at first time in Lightning?
I want to default time to 9:00 AM when user selects date first time. Still He is allowed to change the time.
I am using below tag for DateTime input field:
<ui:inputDateTime aura:id="startDate" ...
- 517
2
votes
1
answer
2k
views
Style and Show command Link as Command Button in Classic & Lightning
I would like a command link to look like a command button. I was once told that I could to that with using the style.
- 1,251
4
votes
1
answer
2k
views
what are good prototyping tools for Lightning Experience? [closed]
I am looking for some tools that I can design Lightning Experience prototypes in.
- 5,257
2
votes
2
answers
5k
views
Aura:Method with Parameters / Conditional Component Instancing
I'm trying to make a component that can be used for many different scenarios. So I want to be able to use it in parent components. The idea is that the parent component would be used to create records ...
- 1,070
0
votes
2
answers
3k
views
To set a field of an aura attribute
Is there a way to append the field of an aura attribute?
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" description="AddBoatReview">
<aura:attribute name="...
- 439
-1
votes
2
answers
1k
views
ui:inputselect with dropdownlist and button align horizontally on same line
I'm trying to align inputselect and button on same line horizontally
<div class="slds-m-around--x-small">
<div class="slds-grid slds-grid--align-center slds-m-around--x-small"&...
- 1,219
0
votes
2
answers
351
views
Lightning SLDS question
I'm new to SLDS and trying to make a lightning:layoutitem fit the whole page and I've tried playing around with slds-size class but to no avail. What I'm trying to do is to make the Add Expense fit ...
- 505
0
votes
1
answer
4k
views
Image not appearing on Lightning Component [duplicate]
In my below lightning component , I am trying to display an image using background image tag.
<div class="imageview" style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}" />
I do ...
- 439
0
votes
1
answer
2k
views
field integrity exception error while saving lightning component
I copied the following code from SLDS into my component and tried to save it.... showing the following error
<aura:component>
<div class="slds-form-element">
<span class="...
2
votes
1
answer
2k
views
How to find invalid lightning code before it causes an error? [duplicate]
Why this is not a duplicate: This question is different than How do I debug my lightning component? My issue was caused by a missing attribute on a Lightning component. It would be nice to see some ...
- 390
1
vote
1
answer
665
views
Display data in stacked form in lightning component
Hi I want to display data in stacked form i.e one after the other in 2 coloumn format. I am using below code for that. But I am getting spaces between the data as shown in attachment; if data is more ...
- 13
1
vote
1
answer
298
views
Design requirements for AppExchange apps
Are there any design requirements/restrictions for an AppExchange app? We would like to create a popup, which will work a bit like a chat screen that some web shops use, but smaller. It would be ...
2
votes
1
answer
30k
views
Align form elements horizontally on the same level - Lightning Design
I would like my form element to appear side by side instead of vertically one below another. For example I have an input text and 2 buttons. I want the input text and button appear in one line. I ...
- 4,791
2
votes
1
answer
6k
views
Lightning button Variant - To appear blue/white and appear center aligned
Trying to build a form and I put 2 buttons in the form. Want 1 of the button as to appear blue and other to appear white. I created below component:
Searchform.cmp
<aura:component >
<!--...
- 4,791
3
votes
2
answers
1k
views
Lightning datepicker for visualForce page
I have a field with date/time dataType and using that field in VF page, initially date picker was not visible then changed standard stylesheet = "true" (is this the only option) and everything works ...
- 461
3
votes
1
answer
60
views
App exchange security review - Is it mandatory to follow the SLDS guidelines while designing VF pages?
To create an app that is lightning ready, is it necessary that visualforce pages follow the SLDS guidelines to pass the app exchange security review?
The app that I am working on has mostly custom ...
- 41
2
votes
2
answers
3k
views
Can you use two force:recordData in one lightning component?
I want to load the fields of an existing Record into a component, then display that component next to the existing detail of the record. Let the user change what they will then save that form as a new ...
- 1,000
0
votes
1
answer
638
views
Split a tab into two-lightning app builder
I am building a lightning app builder page. this page has tabs component. One of the tabs is collaboration which will have activities and chatter fields component. These two components were placed one ...
- 496
1
vote
2
answers
712
views
I need to override the standard detail layout with a page that is compatible with both classic and lightning
I understand there are two approaches to create a page that is compatible with both lightning and classic
Create a lightning component and use lightning out to render it on a visualforce page
Create ...
- 41
10
votes
1
answer
20k
views
Parent Field in Lightning Datatable [duplicate]
Are Parent Fields supported in lightning Datatable?
I'm trying to display Account Name with Contact information, but it seems parent fields are not supported in lightning datatable.
Component:
<...
- 3,340
2
votes
1
answer
2k
views
Hide Lightning:Card on init?
I am having issues getting the style to apply on init. It is working just fine, (setting visibility) on click, but is not having the same effect on init?
Component:
<lightning:card aura:id="...
- 576
1
vote
1
answer
4k
views
cmp.find(...).getElement is not a function salesforce lightning
Below is my code where i am trying to create a typehead component.
But its giving error
cmp.find(...).getElement is not a function
How to resolve this issue.
component -
<aura:component ...
- 381
5
votes
2
answers
8k
views
Attributes and Field clarification from Lightning data service trailhead module
Below lightning component is from Lightning data service module in trailhead
Questions 1: Why there are two object attributes used - record , simpleRecord, when one attribute can serve the purpose. ...
- 4,791
0
votes
1
answer
3k
views
How to get Lightning date picker UI as in LDS design?
I need the following Datepicker UI design as show in LDS base variant.
https://lightningdesignsystem.com/components/datepickers/#content
https://developer.salesforce.com/docs/atlas.en-us.lightning....
- 137
1
vote
3
answers
9k
views
Expandable Section not working in Lightning
I'm trying to do an expandable section, but the collapse and expand buttons don't seem to be working:
<aura:component >
<div class="slds-section slds-is-open">
<h3 class="slds-...
1
vote
1
answer
1k
views
Unable to customize style for flow text area with lightning component on visualforce page
I had some fun this weekend embedding a flow on a visualforce page w/ lightning runtime and using it in a chatter profile tab in a subtab app.
My one remaining issue w this approach is that the ...
- 4,527
0
votes
1
answer
2k
views
lightning:menuItem in lightning:buttonMenu is not working in a nested component
I have two lightning components. One gets account's basic information on load and iterates over it and another displays the each account's basic information in a row. I have explained the div tag ...
- 629
5
votes
2
answers
4k
views
apex:slds vs apex:includelightning vs apex:page lightningStylesheets="true"
apex:slds vs apex:includelightning vs apex:page lightningStylesheets="true".
Which one do we need to use to enable lightning experience in existing visualforce pages?
- 13.7k
0
votes
1
answer
599
views
How to implement "lightning:tree" variants as "Grid"?
How to implement "lightning:tree" variants "Grid" ?
Ref: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_tree.htm
In the following code they have ...
- 137
1
vote
1
answer
7k
views
Aligning table rows and columns in two different components
I have two lightning components. One which gets account's basic information on load and iterates over it and another displays the each account's basic information in a row.
Here's the code:
...
- 629
-1
votes
2
answers
685
views
slds-textarea Lightning Design System, How to make it display as read-only [closed]
I wish to use
<textarea id="textarea-id-01" class="slds-textarea" placeholder="enter my text here"/>
in a visualforce page which uses <apex:slds />
I wanted to know how I can make this ...
- 683
0
votes
2
answers
2k
views
Toggle buttonIcon inside <aura:iteration>
All,
I am new to lightning, hoping someone could provide me some pointers here:
Here's the requirement: Iterate over Basic Account Information object and display name, balance and status. Click on ...
- 629
1
vote
1
answer
3k
views
How do you overwrite the slds-checkbox_faux checked css
I am wanting to overwrite the css a toggling checkbox when checked.
.slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox-...
- 614
1
vote
1
answer
1k
views
How to iterate records using SLDS
I am trying to create a datatable using the SLDS but when I use Apex DataTable I cannot get the column names which are <apex:facets> to get in the correct style slds-text-title_caps
Here's my ...
- 1,620
2
votes
1
answer
2k
views
Show/Hide CSS Ignored When Inside an SLDS Grid Column
I'm just trying to get a simple show/hide experiment running using the code below. It runs fine when the code is outside the SLDS grid. However when I place the div inside a grid column, the console ...
- 676
4
votes
2
answers
12k
views
Scroll Page to top onClick of a button in Saleforce1
I have a problem scrolling to the top of a lightning component page in Salesforce1. I have tried using
window.scrollTo(0,0);
Added the below attribute in the button tag
oncomplete="window....
- 820
1
vote
1
answer
433
views
Lightning:tabset does not refresh on mobile devices?
Noticed that Lightning tabset is not refreshing on mobile devices.
This can be simulated on browser as well. When it appears on a mobile device initially it appears as,
After clicking on different ...
- 2,457
0
votes
1
answer
995
views
Component.Find() method on Ui:inputCheckbox returns 'undefined' whenever the list has only one element
I am creating a table of Contacts and trying to Delete Or Copy bulk of contacts at a time. I am seeing an issue with component.find().length is giving me undefined.Whenever I select a header checkbox/...
- 103
1
vote
2
answers
3k
views
Save button on lightning component missing
I have created new Lightning component and missing Save button at bottom. I can only see Cancel button. What a strange? Am I missing something? What is the solution? see below component.
On standard ...
- 79
0
votes
0
answers
610
views
Issue with Date.now() method creating same value for different inputs
I am trying to copy bunch of contacts at a time from the table. I am facing small issue with copying contacts.When I am doing this I am getting same Id for new contacts created and causing issue when ...
- 103
1
vote
1
answer
5k
views
How to apply css to a class inside div? [closed]
I want to specify styling to a class inside the overlay class. I want to specify padding style to slds-panel__section class. How to do that?
Below is the HTML and CSS but this is getting applied only ...
- 103
1
vote
0
answers
836
views
Blur everything on init
Loading a lightning component automatically focuses the first input element.
Lightning won't let me manipulate the DOM so this javascript solution won't work document.activeElement.blur().
This ...
- 6,437
0
votes
0
answers
1k
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. (!...
- 1,620
0
votes
0
answers
81
views
lightning fields distorted with winter 18
i am not sure if any has faced this problem but looks like our lightning fields have been distorted with winter 18 release , i have tried manual sizing , and below lds 2.2.2 but nothing seems to get ...
- 344
0
votes
1
answer
359
views
How can I get an apex:repeat in a radio group to render in a single column in a Visualforce page using SLDS?
I have a Salesforce Visualforce page built with the Lightning Design System that incorporates an value as a radio group. The radio group is, for some reason, being displayed in a single row:
I'd ...
- 356
2
votes
1
answer
452
views
Enter key in ui:inputtext creating two salesforce headers
I have a simple lightning component which is embedded in a vf page and configured as a vf tab in service cloud console. So if I navigate to that tab in service cloud console my lightning component ...
- 361
0
votes
1
answer
2k
views
Redirect to detail page lightning page
Ik have found this example of a controller directing to the account detailpage lightning component of account which works. I am trying to reproduce this for a custom component but my links shows /s/...
- 419
1
vote
1
answer
3k
views
Clickable Icon in Input field using Lightning Base Components
How can I implement this input field with a right icon button from the LSDS using Lightning Base Components?
This doesn't work
<div class="slds-form-element">
<div class="slds-form-...
- 37.7k
3
votes
1
answer
7k
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="...
- 37.7k
0
votes
0
answers
320
views
align apex fields in vf page adapting lightning style
I am trying to incorporate LDS stylesheets in my vf page and opening the page in Classic view , what i see that is a horizontal scroll bar due to the size of input fields being too long and occupying ...
- 344