26
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" size="small" />.
It gets rendered as follows
If you notice the "icn" is applied to the outer span container rather than svg itself....
24
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 (jsfiddle.net) and overlays only your component:
<div aura:id="uploadCard" class="slds-card__header" style="position:relative">
<div class="slds-form--...
23
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.
20
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 release notes:
The slds-form_inline (formerly slds-form--inline) style was removed. When applied, the style made the element’s width unchangeable.
...
19
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) {
ApexPages.addMessage(
New ApexPages.Message(
s, string.escapeSingleQuotes(message.escapeJava())
)
...
17
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 function (client-side action) with the same
name as a server-side action (Apex method) can lead to hard-to-debug
issues.
So all you need to do is, change ...
15
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 add a for=xxx to the label you will notice what I saw in my original question.
This answer gave the proof of concept that it worked as I thought it should. I ...
14
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 may need to tweak it to suit your needs.
({
sortByName: function(component, event, helper) {
var currentOrder = component.get("v.sortAsc"),
...
12
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="Red" name="red" checked="true" disabled="true"/>
<lightning:input type="checkbox" label="Blue" name="blue" disabled="true"/>
</div>
<br/&...
12
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 instead use slds-align--absolute-center or slds-text-align--center to align your text to the middle. Also, when using grid, make sure you specify a size (e.g. ...
12
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 please refer this link for sample code Github link
The detailed explanation is on link SLDS framework data-table with fixed header without javascript
Edited ...
11
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.) Are you using the CSS provided in the download that ends in -ltng.css?
I'm assuming you're using ui:button to get your button style? The SLDS styles are not ...
11
I had a similar requirement and this worked for me:
Visualforce/Lightning:
<div class="no-text-overflow">
loooooooooooooooooooooooooooooooooooooooooooooooooooooooong
</div>
CSS:
.THIS .no-text-overflow {
white-space: normal;
word-wrap: break-word;
}
The looong text should adjust to <div> size. Tip: it's a best practice use ...
11
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 getMessageJSON() { return JSON.serialize(getSafeMessages()); }
public List<PageMessage> getSafeMessages()
{
List<PageMessage> ...
11
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-hidden="true">
<img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
<div ...
11
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 device LARGER than a medium screen; say a desktop.
So the item below will take 12 parts of the screen on all screens but it will reduce to 4 parts on screens ...
10
You need to use HTML event attribute, example-
Component:
<lightning:input name="input1" label="Enter some text"
oncontextmenu="{! c.handleContext }" onpaste="{! c.handlePaste }"/>
Controller.js:
handlePaste: function(component, event, helper) {
alert("yo");
event.preventDefault();
},
handleContext: function(component, event, helper)...
10
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 for customisation. For example, in lightning:badge, you cannot have hyperlink, but using raw HTML, you can have hyperlink as everything is in your hands. Sample:
...
9
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 today who make their pages look like lightning via SLDS.
Lightning Base Components are not 'replacing' SLDS, instead they 'inherit' their styling from SLDS. Plus,...
9
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, mobile devices render pages at typical desktop screen widths, and then scale the pages to fit the mobile screens. Setting the viewport enables you to control the ...
8
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-col--bump-left" onclick="{!c.back}">Edit</button>
lessons learned: avoid ui components.
8
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 related section
You can find base Lightning components in the lightning namespace to complement the existing ui namespace components. In instances where there ...
8
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 the Roadmap.
<aura:iteration items=",,,,,,,,," var="unused" indexVar="i">
<tr style="{# 'opacity: ' + (1 - i / 10)}">
<td class="...
8
here is a visualforce example:
<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">
<head>
<apex:slds />
<style>
.custom-container div {
border: 1px solid black;
}
</style>
</head>
<body class="slds-scope">
<div class="slds-grid slds-wrap slds-text-...
8
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.
<lightning:accordion activeSectionName="{!v.activeSectionName}">
<aura:iteration items="{!v.items}" var="item">
<lightning:accordionSection ...
8
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's title or the column title). You can use the typeAttributes map to supply three additional parameters:
label
target
tooltip
Your columns entry should look ...
7
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 Lightning Design System "Effects" are applied an object of the same size. They're visual references to illustrate how the effects work when applied to Lightning Design ...
7
The problem is that at Salesforce they haven't integrated Lightning Components with the Lightning Design System properly yet. Fortunately, like most of the time, a work-around can be found.
My work-around is based on the assumption that they should foresee the possibility to simply switch off the standard Lightning Components styles (just like you can do ...
7
In order to automatically style your existing Visualforce pages, WITHOUT (much) CHANGING of your Visualforce code, you want the lightningstylesheets attribute on apex:page.
As long as you Visualforce pages consist mainly of apex:sectionHeader, apex:pageBlock, apex:pageBlockSection and the like, they should style quite nicely to LEx when rendered for a user ...
7
You can use <lightning:layout> or you can use Rahul suggested.
Component:
<aura:component >
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6">
AAA
</lightning:layoutItem>
<lightning:layoutItem padding=...
Only top voted, non community-wiki answers of a minimum length are eligible
