help text icon with lightning:select

The docs are very clear on how to add a help text icon. I’ve tried to do this using lightning:select component. This is what I have so far but it doesn’t appear to be working: <lightning:buttonIcon iconName=”utility:info” variant=”bare” onclick=”{! c.handleClick }” alternativeText=”Settings” /> <div class=”slds-col slds-size_1-of-2″> <lightning:select label=”Please select one:”> <aura:iteration items=”{!v.items}” var=”i”> <option text=”{!i.label}” … Read more

How to display old and new values in Lightning field

I have multiple lightning input field and my requirement is to display the old and changed values of the field in separate view. I am newbie to lightning and I am struggling to figure out the concept. Any help highly appreciated. I started with one field and I have alert box to show the old … Read more

Fixing CSS in lightning community

I’m trying to fix css for the lightning community, I have created a custom theme for a community, and my component implements forceCommunity:layout, due to forceCommunity:layout by default max-width is set to 1440px; I tried to override this it but as it’s a parent element so I’m not able to override it. Please check below … Read more

String Split function is not working in the Lightning JS contoller

I am getting array of string from component’s attribute to lightning controller, now I want to split that string to comma separated values and want to assign that to another component variable but split function is not working in js controller, the below error I am getting: Action failed: c:ContactCardInfo$controller$doInit [Cannot read property ‘split’ of … Read more

Style in lightning datatable. Overlap values

I have a lightning datatable, and I have a problem. If I edit the bottom column, the values is overlap on the table Steps: click on editIcon on botton column (OK), click on editIcon on other value of botton column (the value is overlap) <lightning:datatable aura:id=”objectDataTable” columns=”{! v.columnsObject }” data=”{! v.objectList }” keyField=”Id” hideCheckboxColumn=”true” onsort=”{!c.updateColumnSorting}” … Read more

Show Custom Links in Lightning Home Page

I have a custom lightning component in my home page “Salesforce Login” Now my scenario is whenever I am clicking this “Salesforce login” in my homepage, it should redirect me to salesforce login page. How to achieve this? Answer You can achieve this functionality using Standard Component Called Rich text available in Lightning App Builder. … Read more

How to change the value of disabled with aura:if?

I have a few text input fields and 1 lightning:input type=”file”: <lightning:input type=”file” name=”file” accept=”image/jpg” id=”photoFile” onchange=”{!c.handleFile}” disabled=”true”/> I have to change it to disabled=”false”, if all text input fields aren’t empty. How can I do this? Answer You wouldn’t use aura:if for this. Just set the value to an attribute: <aura:attribute name=”fileInputDisabled” type=”Boolean” default=”true” … Read more

Change backgroud color of a checkbox

I want to change the color of my checkbox in lightning I have the following piece of code in my cmp <lightning:input type=”checkbox” label=”P” class=”{!(v.isPVisible == true) ? ‘selected’ : ”}” onchange=”{!c.change}”/> and the following in css .THIS .selected{ background-color: #EEE; } the problem here is that, I want to change the color of the … Read more

Not able to view line breaks i.e. \n

I have lightning component, which shows a dynamic message -4 Here is the component code– <!– Success Message Start –> <div class=”slds-region_narrow slds-is-relative slds-m-top_small”> <div class=”slds-theme_success slds-notify slds-notify_toast”> <span class=”slds-icon_container slds-m-right_small slds-no-flex slds-align-top”> <lightning:icon class=”slds-icon_small” iconName=”utility:success” alternativeText=”Success!” size=”small” variant=”inverse”></lightning:icon> </span> <div class=”slds-notify__content”> <!– Keeping preformatted considering different formatting sent from different componennts–> <h2 class=”slds-text-heading_small”><p>{!v.successMessage}</p></h2> </div> … Read more