29
votes
Accepted
Lightning : Icon color is not changing using the fill CSS
Actually the issue is which element you are applying the "fill" property to. Meaning when you declare something like <lightning:icon class="icn" iconName="utility:favorite&...
- 1,989
25
votes
Accepted
SLDS - How to position a spinner on a Lightning component
You need to apply position: relative to the component element, in your case uploadCard. This contains the overlay to within the boundaries of your component The following code works as expected (...
23
votes
Accepted
Unknown component apex:slds
Note that this component is only available starting with API Version 39.0. If you try to include it in API Version 38.0 and below, it will not be available.
- 144k
21
votes
Accepted
Summer 18 - Lightning input variant label-hidden hides the label but occupies the space for label
The label no longer being hidden is impacted by the Summer '18 change where many base lightning components no longer automatically include the slds-form_inline or slds-form--inline CSS class.
Per the ...
- 4,016
19
votes
Accepted
How to convert a Visualforce apex:pageMessages to be lightning style
Here is what I do:
Class used by all my controllers:
VF Messages Abstract:
public abstract class VF_Messages_Abstract {
public void createError(ApexPages.Severity s, String message) {
...
- 53.3k
18
votes
Accepted
AuraClientService.postProcess: error in processing [RangeError: Maximum call stack size exceeded] - Client Side Action
As per the doc, it is recommended to use different names for the client side and server side methods/actions.
Use unique names for client-side and server-side actions in a
component. A JavaScript ...
- 10.1k
15
votes
Accepted
SLDS and inputField checkbox
Eric Edit
The answer provided by Ashwani is the correct way to do it. However, the actual reason for my issue in the question was that I had left the for= in the label. If you take this answer and ...
- 22.3k
14
votes
Accepted
Lightning client side sorting
Edit
Here's an updated link for the code provided below.
In Lightning, there's no need to import a library or call out to the server, you can just write your own. Note: I've not tested this, so you ...
- 445k
14
votes
Accepted
readonly property of lightning:input not working
You may use attribute disabled instead of readonly.
Here's an example with lightning:input [checkbox] and lightning:select:
<div>
Checkboxes
<lightning:input type="checkbox" label="...
- 1,170
13
votes
Accepted
SLDS table with fixed header
The SLDS table header row can be fixed using standard classes. There are two classes that are important slds-table–header-fixed_container and slds-cell-fixed and i created a working example on github ...
13
votes
Accepted
Responsive Layouts in LWC
The key to understanding the layout in lightning-layout-item is that the size attribute defines the default size.
The other attributes like medium-device-size define how the layout should look on ...
- 7,718
12
votes
Accepted
I am trying to use slds classes by extending app extends="force:slds" but the slds classes are not being loaded
The new SLDS styles that use "_" will be available in Summer 17. Until then, you need to replace "_" with "--" in order for them to work (e.g. "slds-p-top--xx-large"). Also, do not use CENTER, but ...
- 445k
11
votes
Lightning Design System is overridden by styles from app.css
First on the font. one.app should be serving Salesforce Sans. What version are you currently in?
Are you scoping your component? (This means putting the .slds class on the top level of your component....
- 191
11
votes
Word Break - Lightning
I had a similar requirement and this worked for me:
Visualforce/Lightning:
<div class="no-text-overflow">
loooooooooooooooooooooooooooooooooooooooooooooooooooooooong
</div>
CSS:
....
- 931
11
votes
How to convert a Visualforce apex:pageMessages to be lightning style
Eric's answer inspired me to build a more generic tool that can support an arbitrary number of page messages of any severity.
Code
Controller
public class ToastBuilderController
{
public String ...
- 144k
11
votes
Accepted
How to use slds illustration?
I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-...
- 4,056
11
votes
Accepted
How to add a functionality to stop copy paste on an input field in lightning?
You need to use HTML event attribute, example-
Component:
<lightning:input name="input1" label="Enter some text"
oncontextmenu="{! c.handleContext }" onpaste="{! c.handlePaste }"/>
...
- 2,052
11
votes
Increase Modal height dynamically LWC
I had similar problem. In my case it was a picklist with long list of options.
slds-modal design specifications(here) says they have not done anything to accomodate content with a dynamic height and ...
- 233
10
votes
Accepted
Difference in using Lightning Component <lightning:badge/> and Normal DOM with slds <span class="slds-badge"></span>? Which is Better and Why?
Badge is relatively very simple component. However, the main difference even for simple component is that lightning base components are loaded as custom components and you cannot reach into the DOM ...
- 23k
10
votes
Accepted
Auto scale lightning component in VF Page
Have you tried adding Viewport Meta Tag With width Or initial-scale in VF page as below.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Without a viewport meta tag, ...
- 13.6k
9
votes
Accepted
apex:slds vs lightningstylesheet option
When using <apex:slds /> you are always receiving the latest version of CSS from SLDS while using the lightningStylesheets="true" does not add the SLDS stylesheets to the page, but instead ...
- 19.5k
9
votes
Accepted
One column/two column form responsive layout using SLDS that preserves field ordering?
here is a visualforce example:
<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">
<head>
<apex:slds />
<style>
.custom-container div {
...
- 18k
9
votes
Summer 18 - Lightning input variant label-hidden hides the label but occupies the space for label
Update: As of Winter '19, using Lightning:input variant="label-hidden" works again as the author had hoped (there is no space occupied by the would-be label).
Sample markup:
<div class="slds-grid"...
- 361
9
votes
Accepted
Will Lightning Base Components fully replace SLDS?
SLDS enables developers to create a uniform look and feel across all Salesforce-related applications while adhering to CSS best practices and conventions.
Think about the folks using visualforce ...
- 3,318
8
votes
Accepted
Lightning Component Styling on UI Components
So,
I brought this up with salesforce support. They couldn't provide a good answer. After spinning my wheels for a while i switched over to:
<button class="slds-button slds-button--neutral slds-...
- 719
8
votes
Difference between lightning:button & ui:button
If you go thru the Lightning base components release notes, you will notice that the Base components are more of an extended implementation of the existing UI components.
here's an extract of the ...
- 10.3k
8
votes
Any 3rd party SLDS Stencil CSS available?
Thanks for sharing this! I'm using your solution but made some changes, so it will look more like the lightning stencils. Just wanted to contribute something back :) Btw. there are still no updates on ...
- 6,170
8
votes
Accepted
Lightning: How to open a newly-added accordion section?
You can't set an aura:id dynamically; it is used as a literal string, not an expression. Set the lightning:accordionSection name, then set the activeSectionName on the lightning:accordion element.
&...
- 445k
8
votes
Insert a link in lightning datatable Column Value
Your Type Attributes, and likely the underlying data, aren't set up properly for a url type entry.
Your url item should correspond to the column in your data that contains a URL value (not the link'...
- 88.2k
8
votes
Accepted
How to present a lightning-datatable on mobile devices?
There is something we do have in the slds, with the appending of single class few changes in the markup level for th and td, table will support in the desktop as well as mobile.
Check here for the ...
Only top scored, non community-wiki answers of a minimum length are eligible