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.

Filter by
Sorted by
Tagged with
2
votes
2answers
109 views

Why do the functions in my javascript controller only work individually, but not if both are in the same file?

Here is my code: ({ doInit: function(component, event, helper) { var action = component.get("c.getCampaigns"); action.setCallback(this, function(response) { ...
2
votes
2answers
1k views

Moving message ticker in SLDS

Is there a way to add a moving ticker in the lightning page ? In the classic mode I had added the marquee in the apex page like this <marquee> <b style="color: rgb(204, ...
2
votes
2answers
4k views

Using React.js with lightning framework

I have recently shifted from visualforce development to the lightning environment and I am new to lightning as such. I want to know if there is a way to use React.js components and implement for eg. a ...
2
votes
2answers
2k views

SLDS css stylesheet not found

I'm doing Salesforce trailhead, Lightning Component Basics - Input Data Using Forms. I have a problem with SLDS static resource. Earlier, I had downloaded slds 2.0.2 (named it SLDS202). Inside ...
2
votes
1answer
748 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="...
2
votes
2answers
1k views

Where are examples for using SLDS Dueling Listbox?

In my components I want to use the Dueling-picklist from the LIGHTNING DESIGN SYSTEM. On the website there is no example code but just this BETA note. I need examples for the markup and how to add ...
2
votes
1answer
6k views

“No COMPONENT named markup://aura:method found” when saving component

I get the error message "No COMPONENT named markup://aura:method found" when saving the following component. I attempted to add a simple <aura:method></aura:method> ...
2
votes
1answer
4k views

How to change label of button in lightning experience

How can I change the label of a button in Lightning? When I click on the button I want the label text to change from the controller if the Button ID is dynamically bind. component code <aura:...
2
votes
2answers
195 views

How do you Expand All/Collapse All in lightning:accordion

I'm trying to Expand All/Hide All in lightning:accordion Lightning aura component. <aura:iteration items="{!v.pboW.listPb}" var="pbW"> <lightning:accordionSection name="{...
2
votes
1answer
12k 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 ...
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 ...
2
votes
1answer
5k views

Add background border color for required field in Lightning Component

I am using the required attribute on the ui:inputText in a component. Is there a way to implement when required fields that are not filled out get the red border around them after submitting? same ...
2
votes
1answer
399 views

Lightning Design System, how to start development?

I am trying to learn LDS development and am using this resource to start. Unfortunately, I am stuck HERE (I have an org with my own namespace, I have copied over the Lightning component and set its ...
2
votes
2answers
22k views

Uncaught Error in $A.getCallback() [TypeError: Cannot read property 'setParams' of undefined

Uncaught Error in $A.getCallback() [TypeError: Cannot read property 'setParams' of undefined] throws at https://growerslightning-dev-ed.lightning.force.com/auraFW/javascript/BC4wqH7bmsI7etc2sB4tmQ/...
2
votes
2answers
2k views

How to code 'scoped tabs' in Lightning Design System?

I want to use the 'scoped tabs' component in a demo community on the Napili template. Example of 'scoped tabs' from LDS (Lightning Design System) at https://www.lightningdesignsystem.com/components/...
2
votes
1answer
5k views

Simple SVG icon not displaying in IE11

As the title says, I am struggling to make svg icon work in IE11. Here is a simple reproducible version of my problem. App: <aura:application > <c:SVGComponent ariaHidden="true" ...
2
votes
1answer
498 views

How to hide Lightning Design System Grid item when screen is Small (>= 480px)

I have a Grid which has three columns: <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12"> <span>1</span> </div> &...
2
votes
1answer
241 views

Detect Minimization / Focus Utility Bar Component And Resize Workspace Component

Apparently there is no method (at this point) for detecting when the utility bar item minimize / maximize event is fired. I could potentially use jQuery to listen for a click on the button, but ...
2
votes
1answer
556 views

Lightning Accordion: changing the arrow location

In Lightning Accordion tag I need to change the location of the expand/collapse arrow so instead of it being in the left side of the title (aka the Accordion summary), it should be in the right side. ...
2
votes
1answer
5k 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 > <!--...
2
votes
1answer
1k 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 ...
2
votes
1answer
3k views

How to fix lightning:input from overlapping with element next to it when editing?

Here is the reproducible version of the problem I am facing: ExampleComponent.cmp <aura:component> <ltng:require styles="/resource/SLDS212/assets/styles/salesforce-lightning-design-...
2
votes
1answer
18k views

Align SLDS buttons to right [closed]

I am trying to create a file explorer system, wherein all the folders are iterated and created. I have two buttons beside every folder I need to move those two buttons to complete right. I tried with '...
2
votes
1answer
1k views

How to redirect from one component to other component in lightning?

I want this when user click it is got account id and with id it is redirect to AccountDetailLightning. This my first component: `<a href="javascript:void(0);" class="link" aura:id="{!obj.Id}" ...
2
votes
1answer
2k views

Lightning Design System - Large Buttons

We're trying to use the LDS classes to create a very large set of buttons. How can I set a button size to say 150x150? <apex:page > <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:...
2
votes
2answers
1k views

Lightning component with SLDS

I try to build a lightning component with SLDS, lightning design system. The component I want is the tabs. So I use the code given by lightning design system, but since it is static i need to use ...
2
votes
1answer
2k views

Setting a background color on a custom icon

Based on the documentation, you can set a background color on an SVG icon by appending a class name of the icon container element using the following pattern: .slds-icon-[sprite name]-[icon name] ...
2
votes
2answers
4k views

Does anyone now how to implement a quick and easy date picker?

I have been playing with lightning and I'm surprised how difficult it is to implement a date picker. I dont intent to use this app in Salesforce1, so I need it to work without those solutions. My ...
2
votes
2answers
419 views

How to adjust column width in <lightning:tile> <dl class=“slds-list_horizontal”>?

I tried following the SLDS Utilities patterns for both Name Value Pairs and Description List... In both attempts, the labels' text was truncated, and the tiles had an undesirable excess of white ...
2
votes
1answer
4k views

Lightning Component to show related lists(Contacts and Opportunity) of Account using toggleclass

Now it is working on single click all accounts are opening, but I need to open one account at a time. Component : <aura:attribute name="Accounts" type="Account[]"/> <aura:attribute ...
2
votes
1answer
2k views

Renderer in Lightning component

I am new to lightning and i just dont get renderer. Why do we use it? Can please anyone tell me with example. I get the part that salesforce automatically renders if some data is changed. But why use ...
2
votes
1answer
3k views

Lightning Component Styling is not working

I have a simple lightning component for inserting records to a custom object (Show__c) The component is working fine. I have few issues with styling this component. Markup <aura:component ...
2
votes
1answer
346 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 ...
2
votes
1answer
1k views

Are toasts not generated in standalone app or in VF page?

I am dynamically creating a toast as shown below. This toast is created when response is received from server. I have created a component for toast and am dynamically creating it using $A....
2
votes
2answers
829 views

Icon color <svgIcon> helper component (Community Lightning)

I'm using the helper component suggested on the Lightning Design System Icon documentation page for adding icons to Community components. I'd like to change the color of the icon, and not use a ...
2
votes
2answers
633 views

Custom Scroll not working when Locker Service is active

I'm using an external scroll plugin viz. mCustomScrollbar (GIT Hub) to add scroll functionality dynamically to div. Since I am unable to use ui:scrollerWrapper, newly added Lightning component in ...
2
votes
1answer
1k views

<lightning:buttonIcon /> icons disappeared in community

We recently migrated a bunch of our manually created SLDS code to the new lightning component variants and all was good until we checked back in this morning. All of a sudden none of the svg icons are ...
2
votes
1answer
180 views

Can lightning component be used in desktop application?

I am developing a lightning component, I am adding it in a lightning app builder and using it, but how can i use the same lightning component in desktop. Also, should i use lightning design system or ...
2
votes
1answer
7k views

Fixed page header in Lightning Design System

I'm using SLDS in a Lightning component, and I'm sure I've read somewhere that the page header can be made to stay fixed whilst the rest of the screen is vertically scrolled. My page header looks ...
2
votes
1answer
35 views

Why I See Different Views with same Lightning Component

I'm designing opportunity Edit page with a lightning component using lightning:recordEditForm and Lightning:inputField <lightning:recordEditForm recordId="{!v.recordId}" ...
2
votes
1answer
491 views

<aura:html tag=“style”> not working after summer 19 release

I applied the below code to increase the width of quickAction lightning component <aura:html tag="style"> .slds-modal__container { width : 60% !important; max-width : 80% !...
2
votes
1answer
495 views

Help Text On Fields of Custom Lightning Component

I have a lightning component in which i want to display help text for the fields. I can use for sure. But is there any way to get the help text from backend. I mean when we create the field in the ...
2
votes
1answer
812 views

How to upload a ContentVersion with lightning component?

I'm trying to use simple apex class and simple controller like a test. But can't upload ContentVersion. What is wrong here? handleFileSelected: function(component, event, helper) { let files = ...
2
votes
1answer
2k views

Sizing the layoutitems based on size of the top container and not the viewport

We have built a lightning component which is to be used on the record home page. Now the user can either add the component in the side or in the detail section itself. Everything is working fine ...
2
votes
1answer
567 views

lightning overlay issue

I am trying to display table in the modalbody and modalfooter with ok and cancel button but over lay is not loading it throws some promise errors: Uncaught (in promise) TypeError: Cannot read ...
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="...
2
votes
1answer
2k views

Show comma separated values as pills in input field lightning

I have one input field which will store some value. In that field, every comma separated value needs to be shown as a pill. Currently I'm able to show it outside input text but not inside input text. ...
2
votes
2answers
3k views

How to use both ltng:outApp and force:slds in lightning Application

I have created one lightning application which I'm using in my vf page. To use lightning app in vf page I need to extends ltng:outApp but at the same time I also want to use lightning design system. ...
2
votes
1answer
878 views

Outline on ui:button when press

Hi I try set color of my ui:button border on click to none or transparent. This is part of my code. my aura: <ui:button class="btn btn-image"/> css .THIS .btn:focus { outline-...
2
votes
1answer
481 views

Screen freezes when aura:iteration is running

I am using aura:iteration to dynamically render components and as the components are many, it is taking a bit of time. During this, I want to show spinner till all components are rendered, but as soon ...