@Meghha Try below code, it works for me
<aura:attribute name="colors" type="String[]" default="cyan,yellow,magenta"/>
<aura:attribute name="selectedColor1" type="String" default="cyan" />
<lightning:select aura:id="select1-id" value="{!v.selectedColor1}"
onchange="{!c.onChangeColor}" name="picklist1" label="Select a Color" >
<option value="">-- None --</option>
<aura:iteration items="{!v.colors}" var="color">
<option value="{!color}" text="{!color}"></option>
</aura:iteration>
</lightning:select>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="wrapper" id="yellowdiv" style="display:none">
<div class="large-area" >
Yellow area
</div>
</div>
Controller:
I hope you find the above solution helpful. If it does mark as best answer to help others too.Thanks,Ramesh DonChangeColor : function(component, event, helper) {
var colr=event.getSource().get("v.value");
component.set("v.selectedColor1", colr);
if(colr=='yellow')
{
var yeldiv=document.getElementById('yellowdiv');
yeldiv.style.display = "block";
var offset=yeldiv.getBoundingClientRect();
var scrollOptions = {
left: offset.top,
top: offset.left,
behavior: 'smooth'
}
window.scrollTo(scrollOptions);
}
}
Hi rameshI have given an exact piece of code in my component as follows componentA.cmp
<lightning:card>
<lightning:layout>
<lightning:layoutItem flexibility="auto" padding="around-small">
<!-- <div onkeyup="{!c.generateAlert}">-->
<div onkeyup="{!c.handleKeyUp}">
<lightning:input
aura:id="enter-search"
name="searchProvider"
label=""
placeholder = "Search by Name, Speciality, Procedure, Condition or Provider ID "
type="search"
/>
</div>
<p class="slds-p-left_small slds-p-top_x-small font">Ex: John Wright, Primary Care Physician, Dermatologist, Periodontist</p>
</lightning:layoutItem>
<div class="slds-p-bottom_xx-small"></div>
<lightning:card title="">
<div class="" style="cursor: pointer;" onclick="{!c.toggleAccordion}">
<section class="slds-clearfix">
<div class="slds-float--left slds-p-left_small">
<lightning:icon aura:id="articleOne" iconName="{!v.showaccordionIcon}" size="x-small" />
</div>
<div class="slds-text-heading_small slds-p-left_large">Quick Search</div>
</section>
</div>
<div class="{!v.showFrequentSearches}" aura:id="articleOne">
<!--Component Used for showing Frequent searches and handled through cmp Event-->
<c:COMPB/>
</div>
</lightning:card>
<aura:if isTrue="{!v.showSpinner}">
<div class="slds-p-bottom_xx-small" id="yellowDiv"></div>
<lightning:spinner aura:id="spinner" variant="brand" size="medium" alternativeText="service Request"/>
<aura:set attribute="else">
<aura:if isTrue="{!v.showProviderListcmp}">
<div class="slds-p-bottom_xx-small" id="scrollDiv"></div>
<lightning:card title="" aura:id="displayFindCareList">
<c:GPS_COMP_FindCareList showFindCareList = "{!v.showProviderListcmp}"
providerList = "{!v.providerList}">
</c:GPS_COMP_FindCareList>
</lightning:card>
</aura:if>
</aura:set>
</aura:if>
componentAController.js
handleKeyUp : function (component,event,helper) {
var isEnterKey = event.keyCode === 13;
if (isEnterKey) {
var queryTerm = component.find('enter-search').get('v.value');
if (queryTerm.length > 2) {
helper.navigateToList(component,event,helper,queryTerm);
}
else{
helper.generateErrorPop(component,event,"warning","Please type at least 3 letters","Minimal Entry");
}
}
}
componenAthelper.js
navigateToList : function(component,event,helper,queryTerm){
var flow = component.find("autoServiceRequest");
component.set("v.showSpinner",true);
//here we care calling a visual flow by passing values to input parameters
},
If u observe the code when we press the enter key in lightning:input , the application will execute a spinner and then call the visual flow.
so in my case after the spinner and before the visual flow is called I need to scroll down to the component GPS_COMP_FindCareList.Also after the spiiner is called I have kept an div tage if u observe in my code.I tried ur code in the controller but it is showing error in the statement yeldiv.style.display = "block";Can u please advise with a correct(workable) solution?thanksmeghna
2 answers