Hot answers tagged

28 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&...
user avatar
  • 1,969
24 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 (...
user avatar
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.
user avatar
  • 142k
20 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 ...
user avatar
  • 3,976
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) { ...
user avatar
  • 53.1k
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 ...
user avatar
  • 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 ...
user avatar
  • 22.2k
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 ...
user avatar
  • 430k
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="...
user avatar
  • 1,160
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 ...
user avatar
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 ...
user avatar
  • 7,588
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 ...
user avatar
  • 430k
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....
user avatar
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: ....
user avatar
  • 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 ...
user avatar
  • 142k
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-...
user avatar
  • 3,735
10 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 }"/> ...
user avatar
  • 2,032
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 ...
user avatar
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, ...
user avatar
  • 12.7k
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 { ...
user avatar
  • 17.5k
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"...
user avatar
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 ...
user avatar
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-...
user avatar
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 ...
user avatar
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 ...
user avatar
  • 6,100
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. &...
user avatar
  • 430k
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'...
user avatar
  • 86k
8 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 ...
user avatar
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 ...
user avatar
7 votes
Accepted

SLDS - Motion - CSS / Implementation listed anywhere?

Eric, I suspect your issue is perhaps that you don't have an animation background. What they show on the page you reference are intended more to help demonstrate what happens when the various ...
user avatar
  • 40.3k

Only top scored, non community-wiki answers of a minimum length are eligible